The Browser-safe palette

The image at right simulates a high-quality photograph displayed on a low-resolution monitor. At low resolution, we can still see a calico cat with green eyes but the image is “flat” and much of its detail has obviously been lost. Notice, too, how the cat’s shadow is now an olive-drab blob. This kind of thing often happens when the computer is forced to replace thousands or millions of colors with only a couple hundred. The effect can be even worse when an image has a large area of solid color - like the background of a web page.

All color monitors are not created equal. While most can display a spectrum of color richer than what the human eye can distinguish, others can handle a palette of only 256 colors. Also, some users purposely configure their monitors to display a limited palette in order to accommodate old software, or to save memory and boost speed.

While there’s no way to prevent an 8-bit (256-color) monitor from making a mess of a finely detailed photo, we can at least protect our text colors and backgrounds. Behold the “browser-safe” (or “Web-safe”) palette, a collection of 216 colors that tend to look the same on monitors with different configurations. Devised by Lynda Weinman in 1996, the palette has become one of the mainstays of web design. You may want to (but you don’t have to) use these colors for text, backgrounds, background colors in image files, and any other fields of solid color.

Use RGB values in your HTML and CSS coding. The Visibone names in this chart are descriptive only; Visibone names are not in any way “official,” and they are not valid for coding. (The Visibone Color Lab is an excellent online tool for trying out browser-safe color combinations.)

Four of the sixteen “named” colors are not Web-safe, but you needn’t be anxious about using them. They are gray (#777777), green (#007700), maroon (#770000), and navy (#000077).

Named colors || Top of page || Reallysafe palette