Energy efficient color palette ideas
Did you know you can save battery life with your choice of color palette on your website, app or social media posts? It is true! At least when your user’s device is an OLED display.
My first encounter with energy efficient color palettes was in a talk by Tom Greenwood in probably 2019 or 2020. According to the research that has been done, colors have a different effect on battery life on devices with OLED displays. Black uses the least energy, red comes in second, green is third, blue is forth and white uses the most energy.
It immediately caught my attention. And brought up a lot of questions.
Content of the article
- Should we all go green (literally)? Should we all use dark colors? Will we lose color variety with this approach?
- Dark mode or light mode – What is more accessible?
- Ideas for your energy efficient color palette
Should we all go green (literally)? Should we all use dark colors? Will we lose color variety with this approach?
Nope. Nope. Nope.
And I’ll tell you why.
- Colors only make a difference on your battery’s life with OLED screens. It’s because OLED screens light up each pixel individually. Other displays such as the ones using LED don’t do that.
- Not every screen is an OLED display. Only the newest smartphones and laptops use OLED.
- Some people find it easier to read with darker colors. Some find it easier to read with brighter colors. Certain color combinations can even cause eye strain and fatigue. There is no one-stop solution.
So why care?
OLED screens become much more popular and will increase over the next decade.
Google found that using night mode (with darker colors) used 30% to 65% less power than in light mode, depending on the app they checked. They also found that blue used 25 percent more power than green or red.
Another estimation comes from Tom Greenwood who says, “including data centers transmission networks, the CPU energy on the user’s device […] a design with a dark background could save about 10% of total energy compared to a design with a white background on OLED screens.”
That’s lots of numbers. But you get a gist. Depending on the website or application you can save battery life with energy efficient color palettes. Just keep in mind to care for accessibility as well. What exactly does that mean? Let’s dig a bit into it.
Dark mode or light mode – What is more accessible?
Dark mode and therefore using dark colors is a huuuuge topic. That’s why I will touch on it very lightly in this blog post. No worries, I will cover it in the future, but want to focus more on the colorful side of design choices today.
Two things need to be said though:
#1: Please, please, please don’t ever use bright white text on pure black background. This color combination has extreme effects on eye strain, fatigue and readability problems. It’s already bad with great visual abilities, but even worse for users with glaucoma or similar challenges. Everything gets blurry, eyes hurt, brain is buzzing. By the way, it’s also not good to use pure black text on bright white background. It can cause similar problems. Softer colors make it a lot easier.
#2: Offer both choices – light and dark modes – if you can. Having both variations enable users to select the best suitable option and therefore the best usability for them. Make it easy to select the preferred mode, for example in the header. As there always will be people that rather choose one or the other, you will cater for better accessibility and a greater user experience. (And yes, my website still lacks a toggle as well. I have it on my list. 😊)
Ideas for your energy efficient color palette
So, you’re in the midst of selecting colors for a new brand or a redesign. Why not check out some energy efficient color palettes?
Just one thing before we get into it: Choosing a color palette comes with a variety of aspects. Color psychology, branding and accessibility being some of them. This means, energy efficiency is important but not the only criteria for your color selection.
Please see the following ideas as inspiration and not have-to-dos.
Let’s check them out.
Summer color palettes
I deeply love summer! Summer colors come with more vibrant and deep saturation.
Autumn color palettes
Autumn colors are very earthy, falling leaves kind of palettes. You might have noticed that the Green the Web color palette also fits into that category.
Winter color palettes
Winter colors can be either super harsh and rich of contrasts or very muted. The muted winter colors are what I personally experience in my winters much more (grey, grey, grey).
Spring color palettes
Lovely spring always brings in fresh colors. It usually comes with very bright pastel tones, so the following color palettes are a little optimized for my energy saving intention.
Color palettes are a beautiful topic. You can put a lot of knowledge in them with a balance between branding, color psychology, accessibility and now also energy efficiency. Always consider all aspects and not just one.
Dark colors, red and green are the more energy efficient colors on devices with OLED displays. But be aware of the readability and accessibility your color combinations have effects on. And never use pure white on pure black or vice versa.
And what’s with blue and white?
There’s nothing wrong with choosing colors such as blue or white. They are no forbidden fruits. It’s just that they have a certain effect on battery life of devices with OLED displays.
One small solution might be, that you use an off-white instead of pure bright white as your background color. Off-white is a white that has creamier color tones to it and therefore needs less energy. It’s also softer on the eyes.
What are your favorite color palettes?
Sign up for the newsletter
Get the latest green web hacks, business insights and news directly into your inbox. Usually sent once a month.
Sustainable best practices
Get inspired by lightweight, user-friendly, aesthetic and sustainable UX/UI designs of the web.
My favorite resources
Scroll through my favorite articles, studies, podcasts, talks, communities, books and tools on sustainable web design.