The autumn color season is at its peak where I live, and I'm gazing in awe at the ever-changing, vibrant colors of the foliage. I love the way the reds, golds, and yellows of the foliage mix with the blues of the sky and water.

This explosion of color started me thinking about the Web -- a colorful explosion of a different sort. If you're not yet developing applications for the flourishing Internet, it's almost inevitable that you soon will be. Graphics are an inescapable aspect of Web design, but to do graphics right, you'll need to tame the Web color monster. Unfortunately, a developer's first encounter with the monster often occurs at the worst of times: he's in the client's office, demonstrating a new Web site design on the client's computer, which he discovers doesn't support the full range of colors or sizes that his own development system does.

The monster tamed

Let's look at an example. Please note, though, that for the graphics in this article to be useful, you'll need to make sure your monitor's display is set to a high resolution, showing more than 256 colors.

Here is a graphic designed for use as a banner at the top of a Web page. Starting with an image of tulips, I extracted shades of green and gold to use for the background and text. The result is a smooth blend of greens and golds, as long as you use a suitable browser and monitor setting:

Sample banner with non-web-safe colors - as it would appear with monitor set to 24-bit color.

We see this smooth blend of colors thanks to the miracle of high-resolution color displays, which use 24 bits to describe each color. Each color is composed of a red, a green, and a blue component, each of which gets to use 8 of the bits. The components take on values from 000 to 255 in decimal or 00 to FF in hex. This scheme allows for 256x256x256, or 16,777,216, unique colors to display.

Working with a smaller palette

People whose monitors are set to display 256 colors will not see a smooth blend of colors. You'll see something like this:

Sample banner with non-web-safe colors - as it would appear with monitor set to 256 colors.

Why? Because when the monitor is set to 256 colors, a Web browser will only display colors from its 216-color palette. Netscape and Internet Explorer use a common 216-color palette that originated in Mosaic. 216 was the number of colors that remained after subtracting out the 40 system colors used either by Windows displays, Macintosh displays, or both. The common 216-color palette was established mathematically, based on the equation 6x6x6=216 and using the following values for each of the red, green, and blue (RGB) components:

Decimal	000	051	102	153	204	255
Hex	00	33	66	99	CC	FF

If you haven't worked with color palettes since the EGA days the chart above may be confusing. What it means is that these are the only numeric values that produce a pure component of the chosen color. So, for a pure blue you would set the color values to red: 00, green:00, and blue:FF.

If a graphic contains colors not found in this 216-color palette (for instance, if you set blue to DD instead of one of the values above), the browser will mix little spots of color (called dithering) to approximate the colors in the original image.

Making your colors browser-safe

For this green and gold banner image, I don't mind the dithered look. But to create a look that's more consistent across displays, I'd prefer to select non-dithering colors for the light green background and for the solid parts of the gold and dark green text. Most image editing programs offer a variety of color palettes and also allow the designer to import color palettes.

By using a browser-safe color palette (one that's composed of the 216 colors used by today's Web browsers), I can select colors that I know will render without dithering on a 256-color display. I've used the color picker to select a browser-safe shade of gold (RGB=255,204,51) in this screen capture from Macromedia Fireworks:

Screenshot: Macromedia Fireworks web-safe color picker.

Here's a chart that shows how the text and background colors will look when I change them to the closest browser-safe colors:

Browser Safe?	Image Color	Color Component
Browser Safe?	Image Color	Red	Green	Blue
No		254 (FE)	222 (DE)	076 (4C)
Yes		255 (FF)	204 (CC)	051 (33)
No		021 (15)	078 (4E)	021 (15)
Yes		000 (00)	102 (66)	000 (00)
No		160 (A0)	186 (BA)	142 (8E)
Yes		153 (99)	204 (CC)	153 (99)

And now here is the completed banner graphic, remade to use these browser-safe colors for the background and text:

Sample banner with Web-safe colors - as it would appear with monitor set to 24-bit color.

On a 256-color display, the browser will render the graphic as follows:

Sample banner with Web-safe colors - as it would appear with monitor set to 256 colors.

Of course this is still not perfect. With a fixed set of 216 colors to choose from, we can't expect perfection. But these graphics color tricks are worth knowing, if only to keep the Web color monster from ruining your client-site Web application demonstrations. Many developers forget that their high-resolution monitors and sophisticated tools don't necessarily guarantee a beautiful finished product on another system.

For me...I'm going to sit on the deck and gaze at the autumn foliage. There's no high-resolution monitor in the world that could do justice to the colors just outside my door!

Photo: Portage Lake Shoreline, Keweenaw Peninsula, Michigan--October, 1999.

Home Articles We've Written Web Color Monster