HTML Hot Tip: Use Non-Dithering Colors

When creating graphics for your pages, kep in mind that the popular browsers can only support a small number of "pure" colors. The remainder as created by mixing ("dithering") different quantities of these pure colors.

This restriction is caused by the eight-bit color maps used by most browsers. Eight bits means that only 256 colors can be represented. Since some of these colors are reserved by the window system, even fewer are available for the browser.

Colors in an image's color map are composed of three components: red, green, and blue. If you select six shades of each component, you can mix them to produce 216 (6 x 6 x 6) different colors. The browsers use these 216 colors as the basic colors in their color maps.

The magic values for each of the size shades are 0, 51, 102, 153, 204, and 255. Since a color's brightness varies from 0 (black) to 255 (fully bright), this gives a spread of values for each color. The composite 216 colors all have component values selected from this set. Thus, you'll find that this rather pleasant purple color ( ) has the component values of [153, 51, 204].

If an image contains a color that doesn't exactly match these magic values, the browser can do two things: dither the color to match as closely as possible, or convert the color to the nearest matching color. "Nearest" is an interesting concept, and sometimes colors get mapped to weird alternatives.

To see how your browser handles such conversion, here is a swatch of [204, 255, 230]:

Did you get a solid color, or was it dithered? If a solid, it was probably close to the original pale green. If dithered, you should be able to see little dots of other colors imbedded in the image.

Either way, it isn't exactly what you wanted. To keep this from happening, always choose your colors from the set of colors using the right component values. To make this easier, Lynda Weinman has created a page that gives all the predefined colors and their color values. I find this page really useful; give it a visit and make your images that much more compatible with most browsers.