How to create environmentally friendly color palettes for your web design

Colors manipulate our mood and thinking but also the power consumption on the devices we use. Some colors drain the battery faster compared to others and they are all affected by the brightness of the device. We use colors many times throughout our website, and if you are trying to make it more sustainable you could be taking a step backward if you use the wrong colors.

In this article, we will look into how you can create environmentally friendly color palettes and which colors you potentially should stay from when trying to make your website more sustainable.

Each pixel consumes battery power

Before we can learn how to create environmentally friendly color palettes we need to know how pixels work. It is also beneficial to know which type of display you are working with since the display affects the power consumption as well.

OLED displays and AMOLED displays

OLED displays are a relatively new invention, but it has taken the world by storm. Already in 2018, over 1 billion smartphones were using this type of display and today almost every smartphone is using it. For many years screens have been using backlighting which meant that white and black would be using almost the same amount of energy, but with OLED it's different.

OLED displays are capable of lighting themselves, which means that if a pixel is needed it will light up, and if it's black it will be turned off. This technique allows your device to save energy when you are looking at something dark or black. Take a moment and imagine the amount of energy you can help your visitors save just by using a black background instead of white. All of a sudden it's only a small amount of the pixels using energy compared to when using a white background, where all of the pixels would be energy-consuming.

LCD displays

LCD displays (Liquid Crystal Display) has been the most common screen used for both phones and computer the past decade. LCDs are great screens often working well even in direct sunlight, and they are often the most inexpensive ones at the store. LCDs are great screens and they are often seen on lower-end smartphones, but they are not so great when trying to save battery, and here is the explanation why.

LCDs are made up in this order:

Backlighting.
Polarizing filter with a horizontal axis.
Glass substrate with common electrode film.
Twisted nematic crystal liquid.
Glass substrate with ITO electrodes.
Polarizing filter with a vertical axis.

When using a backlight lighting up the entire display, you won't save any battery power when using a black background compared to using a white background. Compared to the OLED display which has single LEDs lighting when needed, the LCD display is lighting on the whole backside.

Some colors use less power than others

Despite what you might think, it is not all colors that use the exact same amount of energy. In fact, one of the colors in RGB is using significantly more energy compared to the two others.

Each color use in full brightness:

Red: 600mW
Green: 580mW
Blue: 800mW

As shown in the list above, blue is using much more energy compared to red and green. Therefore when you implement color into your web design it is more sustainable/environmentally friendly to use green instead of blue.

Use a dark color palette in your web design

As mentioned earlier in this article, dark colors or even black are best when dealing with power-saving web designs on OLED displays. The reason for this is the low lighting the LEDs are using or that most of them are turned off. Also if your color palette is using red or green colors it would be using less than blue color.

If you are interested in quickly generating environmentally friendly color palettes, then please take a look at Coolors.co. Coolors.co have all types of color palettes, and the great thing is that you can generate your own or even find some earlier generated palettes to use in your web design. Take for example this color palette using red, black, and green: https://coolors.co/45040c-720714-000000-12562a-063a21. It would save lots of energy and you would still be using colors to bring life to your web design.

Use both a light and a dark color palette in your web design

Sometimes a constant dark theme isn't what you or your users want, but luckily we now have a solution for this using a CSS query called prefers-color-scheme.

Prefers-color-scheme allows you to check whether your user's system settings have been set for a light or dark theme. If the theme is set to light your CSS will use the default colors you added, and if it is set to dark it will automatically switch to the dark colors you added. This allows you to automatically create the best user experience for your visitors, and it also allows for you to lower your website's environmental impact without losing points on the user score.

Wrapping up

So, in this article, we talked about what OLED, AMOLED, and LCD displays are, and how they function. We also talked about which types of colors use more power than others and most importantly, how we can create environmentally friendly color palettes for our web design. By reading this article you should have gotten a general feeling of how the displays work, and what you can do to make your website more sustainable using colors.

If you have suggestions or anything to add, we would love to hear your comment on this topic. Please contact us through our contact page, and we will get back to you as fast as possible.

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.