Monday, January 29, 2007

Emergy-C, The Low Wattage Palette

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.

49 comments:

wizzard said...

I have a website that is using your low wattage palette. I am requesting permission to link to your site.

Mark Ontkush said...

Hi Mr. Wizzard,

Great! Send the link and I'll write you up.

wizzard said...

www.computercyborg.com

is my website. You can email me at
helpdesk@computercyborg.com. Thanks!

thepeopleseason said...

Do you have the RGB color codes for this palette?

paperfrog said...

Great idea! We discussed it here.

Jeffry M Liando said...

Of course, the white color is intended to have a small proportion in a design. Otherwise, it contradicts with 74 watt rating.

Mark Ontkush said...

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

Jeffry M Liando said...

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.

Erik said...

http://www.colourlovers.com/palette/48871

I posted your palette to colourlovers, with links back to your page here.

Mark Ontkush said...

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.

Alissa said...

Sure, erm, sorry. I was trying to read too fast before leaving work I guess.

Erik said...

... and "Alissa" would be my girlfriend's account.

Nicole said...

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?

Mark Ontkush said...

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

Paul Williams said...

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. ;)

Mark Ontkush said...

Hi Paul,

thanks for posting. You are the first color blind user to give real feedback! Does white work?

Paul Williams said...

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.

Mark Ontkush said...

Hi Paul,

Thanks for the very cool links!

mark

zarboki said...

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!

spiritquest said...

A very interesting study going no here... I do a fair bit of accessible (X)HTML/CSS development, and colour contrast is one of the things I test for. . . I am going to create an update of the chart to include accessible foreground colours that cater for all 3 major colour blindness, providing recommended contrast and post a reply when I'm ready to show the results. Thanks for posting this, I might design a site trying to incorporate these colours next :)

I think this could be improved in a web design sense to include possible uses for foreground based on the main background colours shown above. I have already got 3 foregrounds for the first colour in the palette and could select many more.

Mike said...

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.

SpencerAR said...

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

Mahalie said...

I think the theory behind this is very interesting, certainly a good thing to know for GUI designers but a much better tactic would be to encourage CRT users to adjust their default background color in the their browsers and operating system desktop. The impact there is much greater than for one website, how many people keep a single website on their screen for long?

I find this color scheme, in any combination, lacking in proper contrast for good readability. And what about printing? Wastes a lot ink (if you don't use correct print settings).

Sorry to be that negative naysayer - but I think it's equally distressing to mindlessly jump on a bandwagon.

feonixrift said...

As for printing, you can use an alternate CSS stylesheet for that target.

David said...

Great. Where can I get clothes in these colours?

John said...

you should use more green - it's the color that the eye is most sensitive to, so it takes fewer photons to be visible.

Joe said...

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

Ken said...

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).

Eightway said...

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

Robert said...

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.

Mark Ontkush said...

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

rebel trooper said...

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/

Jon said...

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!

Ken said...

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).

susannaheanes said...

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

HalFonts said...

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

Nicolas said...

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).

babitol said...

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.

SBF said...

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.

mattbentley said...

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@

mattbentley said...

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

Bill said...

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

Keith said...

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

Zdan said...

im using this now on my blog and trying to do my part not damaging the planet

hoewe said...

...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

Anas said...

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...

antisocial said...

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

david@lowcarboneconomy.com said...

I like!

I've tried to achieve a similar thing using our logo's colours:

lowcarboneconomy.com blog

Thanks for the inspiration!

David

Valery said...

Right color means a lot in web design. I'm fond of color psychology, so I choose them by intuition...