CodeBitch wants a bigger box of crayons

19 February 2001

Remember when you were a kid, and you had a box of pencils or crayons? Maybe it had 12 colors, or 24 or 36. If you were really lucky, you had the full set of 72 Derwent pencils. Pure bliss. A box of crayons, a wad of paper, and you’d be set for a whole childhood of rainy afternoons.

So if 24 or 36 colors was enough when I was seven, why isn’t 216 enough now I am in my thirties? The 216-color Web-safe mantra is strangling me. I want a bigger box of crayons.

The one Web standard we do follow

The HTML might be full of unbalanced tags and spacer GIFs. The CSS might be missing or broken or limited. The browser sniffer script probably falls over with every new point release of a major browser. But the one “standard” almost all of us adhere to is the 216 Web-safe colors, the 6-by-6-by-6 color cube that we are admonished to use. The Cascading Style Sheet standard even encourages this by allowing a three-digit short version of the color directive, eg, #366 instead of #336666.

So if we are never to venture outside this limited palette, why did the standards writers specify colors in two hex digits per channel, allowing nearly 33,000 colors on a 16-bit screen and millions on a 24-bit one? Why do the named CSS colors like AliceBlue bear absolutely no resemblance to Web-safe colors? Why don’t the core styles published by the W3C use Web-safe colors exclusively (Chocolate and Midnight contain non-Web-safe colors, for a start)? Have we been religiously following the only supposed standard that doesn’t really matter?

Why do we use the Web-safe palette? Here’s an explanation from PeterKentie’s Web Graphics Tools and Techniques (1997, PeachpitPress):

Netscape, for example, combines colors in a Color Lookup Table (CLUT)which strongly affects the quality of the color display. If a color isrequired that does not appear in the color table, it is replaced by theclosest color. In the worst case, the color is replaced by two colors fromthe CLUT using the so-called dither effect.

I’m not convinced that this is such a problem. The same book goes on to point out that Unix versions of Netscape have a 5-by-5-by-5 cube instead of 6-by-6-by-6. So you can use colors that work in Windows and Mac OS, or colors that work in Unix, or you can have a Web site that looks like a Mondrian painting.

Moreover, the fear of dithering is overblown. It applies to GIF graphics, but apparently not to coloring of HTML elements. In my testing, browsers don’t dither backgrounds of things like table cells; they instead shift the color to the nearest color that the display can handle, which is not as unsightly as you might imagine.

In any case, as Webmonkey demonstrated in a recent study, the so-called Web-safe palette is not only safe for 8-bit (256-color) displays, it’s only safe for 256-color displays. On 16-bit (“Thousands of colors”) displays, many of the 216 undergo color shifts depending on whether they are in GIF images or defined in the HTML, for example, as a background. That’s why some of the MacEdition logos have the background color knocked out of them – the color shifts on some monitors. You can’t even construct a palette that is both 8-bit and 16-bit safe, unless you are willing to design your site entirely in black, white, red and lime green. Practically all the other colors shift on some 16-bit monitors and not on others, in a convoluted relationship between monitor, browser and platform. It’s a mess. And as high-color monitors are becoming more common on PCs and have been the norm for Macs for some time, the Web-safe color palette is looking increasingly pointless. Being Web-safe for 8-bit monitors means not catering to 16-bit monitors at all. If the Web is about compromise, why can’t we cater to the majority and find a way to degrade gracefully, just as we should with stylesheets?

Earthy thoughts

Recently, I was working on some new sites. My partner and I were working on color schemes, and decided to dig out some books on color for inspiration. I’ve had a copy of Hideaki Chijiwa’s Color Harmony for years, and I recently bought Martha Gill’s companion volume Color Harmony Naturals. The colors are all specified in CMYK print space, but many of them look good onscreen, too. So I worked out the RGB equivalents and the nearest Web-safe colors.

Now, I know perfectly well that these color specification methods don’t translate easily, but you can get matches that are close enough. Aside from discovering that Adobe GoLive 4 has a very flaky algorithm for CMYK-to-RGB conversion, particularly for darker colors (I used my old copy of Canvas instead), I discovered that some zones of the color spectrum simply aren’t well represented in the Web-safe palette. I want to be able to use those colors. I want burnt umbers, caramels and olive greens. I even want off-white and beige. I want the subtlety and beauty of low-saturation colors. I can’t get them in the Web-safe palette.

I can’t reproduce the whole set of colors from Gill’s book in hexform, as it was an ugly scratch page for my own use, and probably violates her copyright.

As examples, though, consider these:

CMYK	Hex RGB	Nearest Web-safe
0, 90, 80 ,60	#722320	#663333
100, 0, 90, 15	#007F44	#009933
100, 0, 40, 25	#007B89	#006699
0, 10, 20, 0	#FFEAD0	#FFCCCC

Clearly, these aren’t great matches. The supposedly evenly spaced Web-safe palette leaves out huge areas of the color gamut, with too many dark colors that look the same, and not enough fine detail at the mid to high-color range where small shifts make a big visual difference.

A cubed compromise: 4096 colors

Here’s my compromise proposal: instead of the 6-by-6-by-6 cube with its 216 colors, much of the gamut missing and Unix users disenfranchised, consider the 16-by-16-by-16 cube of 4096 colors. Instead of just combining 00, 33, 66, 99, CC and FF, you could combine any hex pair with the same digit in each member of the pair. So #1122DD would be okay, as would #0088AA. There are very few of the colors in Martha Gill’s book that don’t have a very close counterpart in this 4096-color palette, and I think that’s a good test.

CMYK	Hex RGB	Nearest Web-safe	Nearest “Web-smart”
0, 90, 80 ,60	#722320	#663333	#772222
100, 0, 90, 15	#007F44	#009933	#007744
100, 0, 40, 25	#007B89	#006699	#007788
0, 10, 20, 0	#FFEAD0	#FFCCCC	#FFEECC

You might want to check how the page looks under 256 colors (on a Mac, it’s just a flick of the control strip, not a reboot like under Windows 95). I can tell you right now that some of my “Web-smart” colors shift in ugly ways on a 256-color monitor, especially #775500, #557711 and a few others with minor differences between the levels of the different channels. The rest just move to the nearest Web-safe color, just as the principle of graceful degradation would indicate.

I’m not about to propose that you go hog-wild with new colors. Given that many Web users do have 256-color monitors still, it’s probably best not to use non-Web-safe colors for your principal color scheme. Moreover, many of these extra colors don’t look that different from current “Web-safe” ones. For example, #4400FF looks very close to both #3300FF and #0000FF. In many cases, the nearest Web-safe color is just as good as the nearest “Web-smart” color. But if you want deep caramel (#EE8800), khahki (#998866), beige (#FFDDAA), steel blue-gray (#888899), warm gray (#CCAABB) or pale olive (#998800), the Web-safe palette will not provide it. Go get your bigger box of crayons, and don’t feel bad about it.

— CodeBitch (codebitch@macedition.com) is the grumpy cow who does the HTML production for MacEdition.

E-mail this story to a friend