After the Black Google post, many folks said that I should redesign my site to make it more energy efficient. I did that, but took it one step farther by designing an energy efficient palette too. Starting with the EnergyStar wattage ratings for different colors, Jon Doucette of Jonathan Design came up with the six colors at top. On average, this palette uses only about 3 or 4 watts more than a completely black screen. White is included as an accent color.The hex codes are as follows:
#822007 (rusty red)
#000000 (black)
#b2bbc0 (blue grey)
#19472a (forest green)
#3d414c (cobalt)
#ffffff (white)
What can you use it for? Any application that is displayed on a device that uses CRT, Plasma, or OLED technology. Any device where white costs money - handheld units, web sites, TV. Enjoy.
47 comments:
I have a website that is using your low wattage palette. I am requesting permission to link to your site.
Hi Mr. Wizzard,
Great! Send the link and I'll write you up.
www.computercyborg.com
is my website. You can email me at
helpdesk@computercyborg.com. Thanks!
Do you have the RGB color codes for this palette?
Great idea! We discussed it here.
Of course, the white color is intended to have a small proportion in a design. Otherwise, it contradicts with 74 watt rating.
Hi Jeffry,
Thanks for posting. You are right, white is an accent color - Jon couldn't really find a way to cut it out completely...
Mark
Inspired by Emergy-C, I have put it as an alternate theme in my blog. However, my preference always changes and someday I may put the current one as an option and the Emergy-C one as a default.
http://www.colourlovers.com/palette/48871
I posted your palette to colourlovers, with links back to your page here.
Hi Erik,
great! Could you change the credit to Jon Doucette, I don't know diddly about color selection. Jon redesigned my site as well.
Sure, erm, sorry. I was trying to read too fast before leaving work I guess.
... and "Alissa" would be my girlfriend's account.
I love it - but two questions:
Did someone check it with one of the color blind user tools?
Is there an effective way to use this palatte with one of the darker colors for the font?
Hi Nicole,
thanks for posting. I don't think it was checked with the color blind users. I also don't know about using the darker color for the font, I would love it see it though!
mark
As a colorblind user let me suggest that using the darker colors for fonts would be a Bad Idea. The blue/green/red contrast is (just) enough to tell the difference between the column elements, but the overall feeling of the scheme is "muddy".
Interesting idea, tho. ;)
Hi Paul,
thanks for posting. You are the first color blind user to give real feedback! Does white work?
Hi Mark.
Yeah, the white is very readable. For whatever it's worth, colorblindness doesn't mean that I can't see color, just that it's difficult to distinguish certain colors. Also, there are a number of types of colorblindness. Check out this colorblindness info page to see what it is. If you're designing color palettes you should look at this website color generator tool which can helpfully show a non-deficient individual what they're designing through the eyes of a colorblind person.
Hi Paul,
Thanks for the very cool links!
mark
Have you factored in the energy used to make aspirin? Because that is the first website that I have ever looked at that immediately started to give me a headache!
Hi thanks for this article. It somehow gave me an idea to stay black at least for now and maybe later moved on to low-wattage design.
I have linked you to my site.
Does the same concepts apply to the standard desktop on PC's? Has anyone come up with a "Best readability per energy consumed" palette for Windows, OSX or Linux?
Thanks,
Spencer
As for printing, you can use an alternate CSS stylesheet for that target.
Great. Where can I get clothes in these colours?
you should use more green - it's the color that the eye is most sensitive to, so it takes fewer photons to be visible.
Actually, as I understand it, LCD monitors expend more energy to display black. This is because an LCD screen has a backlight that is constantly on. To display a completely black pixel, the panel is attempting to block the passage of the backlight completely, which is why LCD panels still are unable to produce the deepest blacks that the best plasma technology can do.
So it would appear that, for LCD monitors at least, that your low-wattage palette theory is actually backward.
http://www.lcdtvbuyingguide.com.au/lcd_vs_plasma.php
What is "The energy use is not appreciable for all black on an lcd monitor." supposed to mean?
The energy used in an LCD display which is backlit, is that of the backlight. It would be better to remove the LCD display type from your list of devices for which this scheme would save energy. (Even transflective LCDs are usually front/back lit.)
Good idea for the rest, but probably insignificant compared with the energy wasted by screensavers which are not. Or that wasted by monitors which are left on outside work hours (running screensavers which are not).
My first reaction to this was this guy is coconuts. I could believe it for CRTs but not LCDs.
So, i hauled out my dusty CRT and plugged it into my watt-meter.
CRT:
Black Screen: 77W
White Screen: 90W
Energy Savings: 14%
LCD:
Black Screen: 33W
White Screen: 36W
8% energy savings
So, some savings...nothing huge though
Yeah, with this type of thing it's really important to clearly state that none of this applies for LCD monitors.
LCD monitors = it doesn't matter what colors you use.
oops, should be,
thanks for posting. The difference in energy use between an all white and an all black screen is not appreciable on an lcd monitor.
lcds are not included in the list above
m
i have a blog called "ihatedesign", the color i defined for it is for better display of my drawings,, but i had something to do, your article is too good, and informative for other designers & natural enviroment, thanks for sharing.
http://ihtedesign.frih.net/blog/
As the host of an environmental radio program, and the web admin for our network, this is a great resource. I am in the midst of rebuilding our website (at the moment it's a bit unruly). I have based our new template on these colours. It will be launched April 30th. With obvious credit and linking back.
The savings may be small. But small savings add up. There are still a heap of CRT's out there. And as those with the money buy new LCD's, those with less will be remain on older CRT's. If I can save them a penney or two. Good deal!
It's all about using less and changing habits.
The comments about the colour blind are a factor. I will look into an alternate scheme for those who may have issues.
Thanks for all this wonderful info. Many things to think about here.
Perhaps after the launch I might get the creators on the show to talk about it?
What do you think?
The Head On Radio Network
America's Liberal Voice
jon@headonradionetwork.com
Host of Fox'd Up!
The other factor which hasn't been mentioned so far is... reflection.
If you get reflection on the screen from a window or light, it is far less obvious if the screen text is black on white, compared with white on black.
My Dell laptop at home is relatively hi-res, so it has a very shiny screen. Near a window or outside, black on white is definitely more readable. (So I need less aspirin.)
A combination of this site's ideas and needing to clean the photos off my work PC to regain space, has caused me to go to a black screensaver instead of scrolling through my Vietnam photos. My desk is poorer for it, but I think that action will save more energy than using low-energy palettes.
A side effect is that the hard drive isn't accessed for the photos, so if set up correctly, it can power down during long breaks, saving even more energy (and prolonging the drive's life).
Well. You've certainly solved a problem for me.
My webdesigner & I have been going round & round for the past 2 wks. on making our website appear to be more eco-friendly. I wanted to add some sort of vivid green, like what you see at all those cool eco-friendly GreenMaven links. She said they all look like Shrek to her.
Our original palette is/was apparently the more eco-friendly --so I've just emailed her to go put it back!!
Thanks for solving that little problem. Best, Susannah B. Smith, Director, Adair Fox Planning Research at http://www.adairfox.com
Very nice work; but beware the inevitable unintended (secondary) consequences.
In a heated building, electrical equipment are simply another source of (electric-based) heat. Any savings are limited to the diference between electric vs. other energy heat-sources. Note: the difference may be positive or negative. Ie: what you save in electricity, must be expended by a more or less efficient source (solar, oil or gas furnace).
In an unheated building or battery laptop savings are real.
And in an air-conditioned (cooled) building, savings double.
Keep up the excellent creative and innovative work; but watch out for those inevitable unintended consequences -- it's the total system energy that counts.
Love my laptop; it keeps my legs warm.
--jim
I have an LCD screen and I keep my CPU at 100%, so the differences between colors don't matter much for energy usage (energy used by screen is low compared to energy used by rest of computer).
My intuition tells me that this palette is perfectly counterproductive. What's needed is just a little bit of study rather than seat of your pants thinking, before recommending this approach. From studies of human perception, white on black is well understood to be harder and slower to read. In one such study, described at TreeHugger, "12 of the 15 subjects did read faster from [black on white] screens." I expect this means that it's likely your users will spend more time using the computer to read a Web site designed with this type of palette (including rubbing their eyes rather than reading), and have their computer spend more energy doing so.
Hi there, can u plz tell me how energy efficient is my blog. I use a blog with a black template.
Plz advice me, how i can make it more energy efficient.
my blog is
http://prashantmaxsteel.blogspot.com.
Plz reply.
Hi there-
I've designed a google custom search (no ads) using Emergy-C for results - the page is here:
http://www.google.com/coop/cse?cx=006697985863738578574%3Ay8ur1tvshoc
Only the results comes up in the Emergy-C palette, due to the way Google works, but you could design your own search engine front page which uses the Emergy-C palette, using the search input box code from the following page:
http://www.google.com/coop/manage/cse/code?cx=006697985863738578574:y8ur1tvshoc
Thanks,
and good luck-
M@
Sorry, this comment engine cut the ends of the links:
Search engine:
http://www.google.com/coop/cse?
cx=006697985863738578574%3
Ay8ur1tvshoc
Google Search input box:
http://www.google.com/coop/manage/
cse/code?cx=006697985863738578574:
y8ur1tvshoc
Cheers,
Matt
Mark,
I'm not sure I'm 100% convinced about saving the energy by changing colors, but it certainly can't hurt!
With that in mind, a charity I work with has created a site that lets people choose the colors of their Google Search right in the URL, and I have now created an Emergy-C pallete that they can use very simply.
The site is http://emergyc.searchforhearts.com.
100% of all proceeds from the site go to the Hypoplastic Right Hearts organization, which is a fabulous group who helps children congenital heart disease and their families.
As you can see on the page, you can actually put any colors you want in the URL, such as:
http://black.searchforhearts.com
or (foreground.background):
http://yellow.black.searchforhearts.com
or even hex codes, such as:
http://E1FFE2.19472A.searchforhearts.com
I hope this helps your readers and that you'll promote this, as it not only lets your users save energy, it also helps support a great cause.
Bill
I think emergy c is a brilliant way to redesign the entire world wide web. I'm in the process of creating a business that would take a step toward doing so and I wanted to know if I could use Emergy-C as the name of my business
im using this now on my blog and trying to do my part not damaging the planet
...i use the emergy colors as well on my knowLED Blog, to not just save energy with my LED Bulbs and Fixtures. a small step for an individual, but few small steps make a big distance! ;-)
cheerio
hoewe
Hi Mark!
I am a website designer myself based in South Africa and I SERIOUSLY did not know that the colors of a website could affect energy use. Is this for real? Are the colors you are using the optimal combination?
Just very curious...
I preffer to use (only for English people):
http://www.blackoogle.co.uk
or if you are from United States:
http://www.blackoogle.us
Is another black google site, but load faster than others.
bye
I like!
I've tried to achieve a similar thing using our logo's colours:
lowcarboneconomy.com blog
Thanks for the inspiration!
David
Right color means a lot in web design. I'm fond of color psychology, so I choose them by intuition...
Post a Comment