Color on the Web

You’re seeing red. They’re seeing orange. Not the same, is it? More often than not, color on the web is approximate. So how do you choose colors that are going to work best? Are you forever stuck with the old 216 color “web-safe” colors? Is there technology that ensures what you see is what your visitors get?

Color in web design has two major components—Technical and Emotional. The technical aspects are different on the web than they are in other mediums. The emotional aspects of color can be both cultural and personal.

Technical

In the non-computer world, most color is seen as reflected light—light bouncing off objects. On computer screens, color is backlit not reflected. There are colors you can see on-screen which are nearly impossible to duplicate on paper, and vice versa.

Colors on screen are RGB—Red, Green, Blue—because all computers monitors really only show those three colors. Like your television, the dots are so small that they visually mix and can appear as millions of colors.

Just as colors can appear different under different kinds of lights. You know how when you take a picture inside it can look greenish because of fluorescent light, or yellowy with incandescent light. And even sunlight changes color throughout the day. This is called “Color Temperature.”

The same thing happens on computer monitors, because each one is slightly different. Some are warmer, some cooler, some brighter (gamma) so darker. See a graphic that demonstrates this.

So when you see a color on your screen, chances are that’s not exactly the color someone else is going to see on theirs. Most of the time this isn’t a problem—but when you’re selling items and people expect the red sweater they buy to look the same when they get it—things get tricky and require additional software to assure that the color is correct.

“Web-safe” color consists of 216 colors that should appear as similar as possible on various computers and operating systems. It was vital back when most computers could only show 256 colors at a time. But now that over 90% can show millions of colors, the web-safe palette is less important and often ignored.

Emotional

When your page appears on your site visitor’s screen, the first thing they’ll see is the color. They may not stop and think about the colors—chances are they won’t, but that color will carry emotional connotations with it.

Mary Carter offers a useful spin around the color wheel and it’s emotional implications. Red is hot and exciting—the actual wavelengths of the color are stimulating. Green is cool, and reminds people of nature, grass and trees, it’s comforting. Blue is cool—the sky, the sea. Then there’s also the sad connotations of having the blues.

And yet, each of these colors has countless variations that can mean the difference between “electric blue” and “baby blue,” or “blood red” and “candy-apple red” or “grass green” and “puke green.” Just hearing those names you can see the color in your mind—and feel the reaction.

Like any other part of design, the key is to use colors that are appropriate. You probably don’t want to use bubble-gum pink for a stock investment site. You probably don’t want to use a drab corporate blue for a site for teenagers. There’s no right or wrong, just appropriate and inappropriate.

COLOR PRODUCTS

Pantone Color Matching: Pantone is the king of color in many areas, from print, to fabrics, to decorating, and now the web. They offer software to help make sure what you see is the correct color, and ways to help you get the closet match to their special Pantone Spot colors, even on screen.

e-color: Server-based color correction. e-Color corrects images before they are delivered, based on what it knows about your monitor. If you calibrates your monitor (using their online calibrator and browser plug-in) then a cookie is set. If you click on the small e-color button on the home page (it says “just like real life” and may also have a falling leaf), you can calibrate your monitor online. Click here to see the online calibration, then make sure to choose your language.

e-Color can also use a “predictive model” (based on what most monitors show) to improve color fidelity by 53%. It’s currently in use by Bloomingdales, Loreal, National Blinds and Wallpaper. The system is designed for medium to large companies, with both ASP and enterprise software in the range of $50,000 and up. e-Color also sells a PC product called Colorific for calibrating your own PC to better ensure that the colors you see onscreen are the colors you’ll print.

ColoReal: This PC-based color correction system lets the color correction happen on your own computer, rather than a server. The advantage is that your computer is then color corrected for scanning, digital cameras and printing. The trick is that you have to have the software, and you can’t buy it.

Compaq has shipped on all computers since July 2001, and if it comes on your hardware, it’s already set up, no calibration is necessary. If you have a Web sites can distribute “Color Lite” software. Coloreal starts at around $3,000 and goes up depending on the size and traffic on your site.

The system is Windows only, but it’s also faster to implement than server side system. Coloreal’s first web site implementation will be Novica (in association with National Geographic) in the next few weeks.

 

Copyright © 2005 Daniel Will-Harris, www.will-harris.com

Need help with a project? Ask me

Home | Design | EsperFonto | Writing | TypoFile | Toni | Store | Kitchen | Mail

[Design]
[EsperFonto]

>

[Art on the web]
[Using Art for Inspiration]
[Five keys to a better site]
[Words on the Web]
[eBay for e-commerce]
[Color on the Web]