Understanding Web Safe Colors

There is a palette (a collection of available colors) of 216 colors that is at least somewhat predictable across the various hardware and software platforms. Called the web-safe palette (or, the safety palette), these colors are recognized universally by all browsers and systems (well, except the really ancient systems, anyway). Although the colors don’t appear exactly the same on all systems because of the vagaries of different monitors, they are at least recognized unambiguously by all systems.

The web-safe colors were chosen mathematically, not because they are necessarily the colors you would elect to use most often. RGB codes for web-safe colors are made up of the digit zero plus the other hex digits that are multiples of three: 3, 6, 9, C (12), and F (15). Additionally, the digits are always used in equal pairs.

For instance:

#3366FF is web-safe, because it consists of pairs of identical digits, all multiples of three.

#2255AA is not web-safe because the digits are not multiples of three.

#3693CF is not web-safe because the digits, though multiples of three, are not paired identically.

Each step up in the allowed number pairs, such as from 33 to 66, represents a 20% increase in the saturation for that hue.

Many colors possess names as well as hex codes. For instance, you could say “color:red” in your CSS. The hitch is that only ten of these color names translate to precisely the same color code in all browsers. You’d think that something as straightforward as “red” should always translate to #FF0000, but unfortunately, that isn’t necessarily true. For instance, the color name “brown” translates to #A52A2A in Navigator 7.2 and to #993333 in Internet Explorer 6. Although newer versions of Internet Explorer and Firefox are more consistent with each other, it’s still safer to use hex codes, not names.

Virtually all graphics programs and web development environments provide their own versions of the web-safe palette. Unfortunately, the web-safe palette is severely restrictive, especially when it comes to providing the subtler, more sophisticated colors that many designers crave. So what happens if you choose to use a color that is not web-safe? If a visitor has a system powerful enough to see that particular color, the color displays properly. If not, the browser does one of two things: either it uses its best judgment to shift the color to the nearest color that it does recognize, or it dithers the color.

Dithering is alternating pixels of two different colors with the intent of fooling our eyes into perceiving a third, intermediary color—that is, essentially, by faking it. Dithering on a computer screen works in much the same way that our eyes blend individual frames of a flip-book to simulate what we perceive as smooth “movement.” Even though our eyes perform this blending function automatically, the grainy look of dithering can still be noticeable and distracting, particularly in large areas of what should be solid color. Although dithering is not always bad (sometimes we might even do it on purpose for special effects), most of the time solid color is preferable to dithered color.

There are several algorithms designed to perform dithering. One of the earliest, and still one of the most popular, is the Floyd-Steinberg dithering algorithm, developed in 1975.

One of the strengths of this algorithm is that it minimizes visual artifacts through an error-diffusion process; error-diffusion algorithms typically produce images that more closely represent the original than simpler dithering algorithms.

— Wikipedia

Because of this problem, some experts still advise limiting ourselves to the non-dithering, web-safe palette. The web-safe palette is indeed limiting, however; 216 colors are not many colors for most designer (like me). Inevitably, the exact color that we envision is simply not available in the web-safe palette.

That leaves us with a dilemma: do we restrict ourselves to that limited palette of just 216 colors to make sure that our colors don’t shift or dither, all because of the few remaining users who cannot recognize more colors? Or, do we recklessly and joyfully pick from the marvelous, gorgeous, and expressive 16.8 million colors that most, though perhaps not all, of our users are capable of seeing?

Last Words

In fact, there are so few of the older 256-color computer systems remaining now that most experts are already proclaiming the demise of the web-safe palette. Still, the answer to the web-safe palette question is, “It depends.” It depends on whether a significant portion of your audience is likely to have older computers that support only 256 colors. It depends on whether you expect your site to be viewed on PDAs or cell phones, which may support only 256 colors. Even for those users, web-safe colors are most critical in large blocks of solid color in graphics and in HTML background colors, where dithering or color shifting is most apparent. If neither of these circumstances seems to affect a large number of your users, then feel free to use any colors that strike your fancy.

Maybe dithering be considered graceful degradation of color. Color is so uncontrollable onscreen when you consider the many operating systems, monitor types and users altering monitor settings. No Pantone standards on the web yet.

I’ve been teaching the web-safe colours for a while now, but I’m convinced that it no longer matters. Sure there is no harm in using the web-safe colours, but the variety of colours available outside that palette can lead to better designs and more pleasing colour schemes. There are 16 colour names in the W3 standard, but there are plenty of other names you can use to make life easy… though not exactly compliant.

Web safe colors remind me of the old days of the home PC. The 48K ZX Spectrum had a color palette of 8 primary colors that you could get 16 colours from. For example creating a chess board (dither) image combining red and green pixels produced a dark brown color.