A Little Bit on Colo(u)r

[Return to Website Development Tools]

HTML & Color	Ever wonder what's up with those HTML color specifications? Hexadecimal, that's what.
Primary Colors	You'll recall from kindergarten that paint has three primary colors: red, yellow and blue. And as any school child (or parent intent on cleanliness) knows, adding them together produces black. Ah, but light has a higher calling. It must adhere to the laws of optics. It has three different primary colors: red, green and blue. And (will wonders never cease?) adding them together produces white. Believe it or not. It's true. This system is called "RGB" color.
	HTML uses three sets of numbers to represent the quantity of red, the quantity of green, and the quantity of blue that go into each "pixel" (picture element) on your monitor. The only glitch is that the numbers are represented in base 16 — called "hexadecimal" or just "hex."

Hex	Hexadecimal counts up like we do in base 10 but since hex goes a little bit further, a few digits are added: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F. So "A" is really 10, "B" is 11, and "F" in hex really translates to 15 in base 10. Whereas the largest two-digit number in base 10 is "99", the largest two-digit hexadecimal number is "FF" (which, in base 10, is 255).
	Prefacing a number with a pound sign tells the web browser that the number to follow is in hex. The browser knows that the first two digits are Red, the second two are Green and the last pair is Blue — RRGGBB. Remember, since adding colors in RGB produces white, the higher the numbers, the lighter you're getting. What will the number "#FFFFFF" produce? (Click to find out). What about "#000000"?
	After that, the rest is easy to figure out. #FF0000 says to max out on Red, but to include no Green or Blue. #00FF00 says to max out on Green. #0000FF says to include no Red or Green pixels whatsoever, but to max out on the Blue ones. Easy. And a wash in the middle — #333333, for example — produces gray. In fact, that's the background color of this page.

"Web Safe": Trouble in Browserville	The problem is that not all browsers can display all colors. That's the source of this "Web Safe Palette" foofarah that you've probably heard about. But even "web safe" is not enough. Not all browsers display the Web Safe colors in the same way either! That's because different operating systems use different color palettes. They're similar, but perhaps not exactly the same.
	Let's say that a guy named "Homer" lives in Springfield. Another guy also coincidentally named "Homer" lives in Shelbyville. When the officials of Springfield talk to the officials of Shelbyville, they agree that each has a "Homer" and they conclude from this that the color "Homer" is therefore "web safe" — even though those names point to two different characters.
	Still, even if this system isn't perfect, it's better than, say, Shelbyville having no "Marge." In that event, Shelbyville is forced into concocting a weird brew that can simulate "Marge" — say, by taking 60% of the color "Julie Kavner" and adding 20% "Matt Groening" and 20% (or more) blue hair. The result probably doesn't match Springfield's color "Marge" very closely at all, but it's the best that Shelbyville can do on short notice. This process of faking colors is called "dithering."

Try This at Home	If you have access to a color meter, try this experiment. (On a Mac, for instance, use the DigitalColor Meter located in the Applications --> Utilities folder.) A color meter will tell you the RGB colors of any pixel on your monitor, no matter which window or application happens to own it at the moment. Find a webpage that has a solid background color (like this one) and open it in as many applications as you can — Netscape Navigator, Dreamweaver, Microsoft Internet Explorer, OmniWeb, Opera, etc. Use the color meter to see if each application renders the color in the same way.
	Here's what I get when I try it. The background of this page is set to #333333 (you can check the source HTML to verify this). When I preview this page in Dreamweaver, and run my trusty color meter over it, I get this result: #333333. But when I preview this page in Microsoft Internet Explorer, the color looks much darker and, in fact, registers on my color meter as #232323, even though that's not what the HTML bgcolor attribute specifies. (And logically, the page would be darker, wouldn't it, because 23 is closer to 00 than 33 is, right?) What gives?
	Well, it's only the difference between Springfield color palettes and Shelbyville color palettes— even if, in this case, they're on the same machine. In general, too, we can say that the Windows color palette generally darkens the midrange of colors too much, whereas the Macintosh color palette lightens them too much. The "real" color ("if there is such a thing," sniffs Agent Smith) resides somewhere in the middle. On my machine, Photoshop is probably the application that gives me the most accurately calibrated colors, and a background filled with "333333" registers as "262626" with the color meter.
	If you do professional color correcting, this is the bane of your existence. You're constantly futzing with the "gamma" on your monitor, trying to calibrate it to depict colors properly. And remember the difference between the finger-painting pigmented colors and your monitor's RGB colors? Converting from one system to the other is going to give you a kidney punch every time you print or scan an image. Ouch. In fact, a computer monitor can accurately display certain colors (like a neon glow, for instance) that are impossible to print. The range of possible colors in any medium is called the "gamut" and those neon colors, the professionals would say, are "out of gamut" for print media.

The Moral	What's the moral of the story? Well, you ain't ever gonna get what you paid for. Decide how far you're willing to go to accommodate Web Safe colors but don't knock yourself out to get there. Web safe colors work best on monitors that are displaying only 256 colors. Lots of systems nowadays can display millions of colors without breaking a sweat. Because of changes like these, many web gurus like Lynda Weinman (who is often credited with — although she denies it — inventing the Web Safe color palette) say that the whole Web Safe color notion is dying off. Expect a bit of a resurgence as PDA's surf the web in increasing numbers, but eventually they too will be able to display millions of colors and we'll be speaking of "Web Safeness" in the same hushed tones as we do the dodo and brontosaurus. Some day, only anthropologists will be interested in "web safe" colors.
	Regardless, though, don't expect visitors who can view millions of colors to see your stuff in precisely the way you've intended. Even if you take all the necessary precautions, each OS is going to give the color its own individual spin, and your viewers are probably using monitors that are out of calibration anyway. It's a grand world, ain't it?