Wiki

Colors vs. Energy Consumption

If details are important when working on a website or mobile app, then colors can be a rabbit-hole to look into. Colors are not just colors, and depending on the technology your visitors/users are using it can cost them more or less energy to browse the website.

In this wiki article we will without too much technical jargon look into the different screen technologies and why certain colors will consume more power compared to others.

LCD

The liquid crystal display (LCD) technology was invented in the 1960s. LCD screens use a layer of liquid crystal material that is sandwiched between two sheets of glass. The liquid crystals are able to control the passing of light through the glass, which allows individual pixels on the screen to be turned on or off.

LCD screens are commonly used in smartphones, tablets, laptops, computer monitors, and televisions. They are popular because they are thin, lightweight, and energy efficient compared to older technologies like cathode ray tubes.

It is difficult to provide an exact estimate of how many devices worldwide use LCD screens, but it is safe to say that LCD technology is widely used and has become the standard for many types of digital displays. LCD is often used in the low-end rank of devices.

In general colors won’t make any significant difference in the power consumption on LCD technology. The reason for this is that the panel is lit by a backlight that will shine the same amount of light no matter the color.

OLED

OLED stands for organic light-emitting diode. It was invented in the late 1980s and early 1990s by researchers at Kodak and other companies. OLED screens use organic compounds that emit light when an electric current is applied. This eliminates the need for a backlight, which allows for thinner screens and better energy efficiency compared to LCD screens.

OLED technology is commonly used in high-end smartphones, tablets, and televisions due to its ability to produce deep blacks, vibrant colors, and high contrast ratios. OLED displays are also flexible, which allows for curved screens and other innovative designs. It is estimated that over 500 million devices worldwide use OLED screens.

Colors on OLED makes a difference in the power consumption. This is because each individual light is changing the consumption depending on the amount of light and color. So by choosing the right colors you can make a difference in the energy consumption for your visitors using OLED devices.

Colors vs. consumption

When working with a color’s power consumption we use RGB (Red, Green, and Blue). By combining these colors we can create all the colors in the world. The 3 main colors have different wavelengths which will result on colors having different wavelengths when combined.

Below you will see the general wavelength of each main color. Blue has the shortest which makes blue the highest energy-consumer. Right after comes green and as the most energy efficient color comes red.

  • Red: 700-635 nm
  • Green: 560-490 nm
  • Blue: 490-450 nm

If we turn these values into fictive numbers then we could say that red will consume 1 watts, green will consume 2 watts, and blue will consume 3.5 watts. This shows us that designs using warm red and green colors draw less energy than cold designs using blue.

Disclaimer

Colors are not making a significant change in the energy consumption on OLED. If you are in the designing stage and want to improve the 1%, then choosing energy efficient colors in the beginning of your project is a good idea. But you don’t have to change branding colors or undergo significant changes. If you are looking for a bigger impact, then it is recommended to look into the dark-mode first approach instead.

Join our newsletter

Join our monthly newsletter and receive news about Sustainable WWW, information about interesting articles, events and podcasts.