True Colors

Contributor: Molly E. Holzschlag, Communications Director
World Organization of Webmasters

Are you practising safe color? Do you care? While the challenge of interpretable color has been somewhat ameliorated by the spread of better color-management systems, achieving consistent color across computers, platforms, and browsers is still very difficult, if not downright impossible.

Why is this, and how do you decide whether to adhere to Web-safe colors or toss the seemingly limited 216-color palette out the window? Integrating your knowledge of the way computers manage color, how the Web-safe palette came to be, and why safe isn't really safe will help you gain a deeper perspective on why Web color is the way it is. You will also learn to aim for the color results that best meet your needs.

Computer color technology

As if issues between code for differing browsers and platforms weren't enough to keep ibuprofen manufacturers in business, there's also the issue of interpretable color. The problems with inconsistent Web color from screen to screen are rooted in platform and browser issues.

From a technical perspective, computers can display a range of colors onscreen, depending upon the relationship between a computer and the platform it's on and the type of video memory available. This technology combined with the computer screen layout (which is essentially a grid made up of many small boxes - pixels) brings your Web designs to the screen.

To achieve color in the digital world, light stimulus must be added to other light. This process is referred to as additive synthesis. In this model, the primary colors are red, green, and blue.

A perfect example of additive synthesis is your television screen. When you look at the picture on a TV screen, you're really looking at thousands of phosphor dots made up of red, green, and blue. The dots are tiny, so they appear to blend together to achieve a given color. RGB computer monitors work the same way.

Additive color originates within an algorithm that numerically determines how much of a given light stimulus makes up the color in question. Each color available on a computer contains some percentage of red, green, or blue. So when I'm using a computer, I can mix a bit of red light, a bit of blue light, and a bit of green light and come up with yellow light.

Specifically, secondary colors in the additive process are created using the same ratio found in subtractive synthesis. If I mix one part of red with one part of blue, I get a secondary color (in this case, magenta).

The absence of light stimulus makes black, and equal portions of red, blue, and green make white. To render color onscreen, computer color-management systems allot each available pixel a specific amount of a computer's video memory in bits. The type and quality of color changes depending on the number of bits and pixels available.

Figure 1. Early computer color, one bit per pixel, two colors total Lowest on the totem pole when it comes to color management onscreen is one bit per pixel. This supports only two colors (see Figure 1). One-bit systems were common once upon a time, but now they're almost unheard of (especially for home computer users), and most certainly for Web designers and developers. It's possible that designers will have to think about 1-bit color again as more cell-phones and PDAs are connected to the Internet.

The next color level is known as 8-bit color. When 8 bits of color are allotted to a single pixel, the resulting number of possible colors is 256. As you know, this is an important number when it comes to Web color. For the moment, it suffices to say that 256-color systems are in popular use. But again, the proliferation of higher-end systems for home users, as well as the speciality systems used by designers, make 8-bit color systems less important as time goes on?at least in terms of how Web color is produced.

Sixteen-bit color appears in systems that allot 16 bits of video RAM to a pixel. The resulting number of colors is in the thousands, which naturally offers a radical increase in color quality. But interestingly enough, the 16-bit color model is very different from both the 256-color system below it, and the systems with millions of colors above it. This is due to the fact that 16-bit color, also referred to as high color, is based on a system of percentages. As a result, the colors in high color may or may not have crossover colors from either the lower or higher ends of color management.

Finally, true color monitors are those capable of managing 24 bits of RAM per pixel. This, in turn, creates millions - specifically 16,777,216 - of resulting colors. It's important to point out that this palette is more mathematically in step with the methods by which the 256-color systems work. As a result, all 256 colors in the 8-bit system are also found in the 24-bit system.

Color for browsers

No doubt you're intimate with the Web-safe (also known as browser-safe) palette. This palette consists of 216 colors that should remain stable across Mac and Windows platforms. In reality, you'll never get consistent color across browsers and platforms (there are simply too many variables). However, it's extremely important to reach for the most consistency, and that's exactly why Web-safe color evolved.

But if color systems can support at least 256 colors and at best millions of colors, why is the Web-safe palette so limited? It's a historical issue, and one that I'll describe here to emphasize that using this palette is important, but not always necessary.

Figure 2 The color on the left is Macintosh color
and on the right is Windows color

When the Web became a visual space in 1994, most Macintosh and Windows computers were 8-bit, 256-color. Each platform reserves about 20 colors for use by the system, and there are differences between the color tables found on those platforms. All told, in an 8-bit system, the differences total 40 varying colors (see Figure 2 above). If a designer uses an unsupported color, the potential for dithering is high in 8-bit systems (the computer will pick the closest possible color). Other problems include grabbing a different color completely, so a light pastel pink might suddenly become neon pink on another system. This inconsistency is, for obvious reasons, problematic.

To reduce the cross-browser, cross-platform inconsistencies, Netscape eliminated the 40 problematic colors and created a browser-specific palette of 216 colors. Ideally, using these colors reduces dithering and other color rendering problems across platforms. As a result, the Web-safe palette was born.

Now that computers support 16 and 24-bit color, the browser-safe color issue becomes less of a concern in certain circumstances. However, many designers have stuck to the browser-safe palette because there are still many computers (particularly those in schools, countries outside the U.S., and other areas) that are limited to 256 colors. If you use the Web-safe palette, you're likely to achieve greater consistency with your designs.

But all is not perfect in the so-called Web-safe world. Why not? Well, consider the earlier discussion describing the differences between 16-bit and 24-bit systems. Your colors might appear slightly different on a 16-bit system and a 24-bit system, even if you're using the Web-safe palette. What's more, several concerned parties began to closely examine the emerging problems with Web-safe colors. They found some disconcerting evidence that what we think is Web-safe really isn't safe at all.

Figure 3. Possibly the only truly Web-safe colors Danger, danger! Web designers complain all the time about the incredible restrictions that the Web-safe palette imposes, and they often choose not to use any colors from it. Of course, there's a devil's advocate point of view here: Many print designers who move to the Web get excited that they can use so much color for free. Color processing in print is expensive. On the Web, it's not. So some designers feel empowered to be able to use color at all. However, consider these startling revelations. In January 1999, Bob Stein of VisiBone (www.visibone.com) performed some tests across monitors. His results suggest that there are only 125 truly Web-safe colors from which to choose. Stein does point out that some of the problem might be caused by the hardware, and some of it might be related to eyesight. A later test, performed by David Lehn and Hadley Stern for WebMonkey in September 2000, looked at colors across system types, browser types, and computer types and ended up with only 22 colors that could be considered truly Web-safe (see Figure 3 on the left). These colors are very limiting and not the most attractive! Playing hamlet Yet, none of this answers the question of whether a Web designer should use the Web-safe palette. In the everyday world, many designers don't even adhere to the 216-color palette, much less the subtler concerns of even more limited palettes for true cross-platform, cross-browser color control. Aside from tossing up your hands in utter despair, there are two routes you can take regarding Web-safe color: Stick to the 216-color palette at all times; or forget the palette and use any color you want. Depending upon your circumstances, either of these choices can be viewed as wise or reckless. When you know the types of computers, browsers, and monitors that the majority of your audience uses, you have much more flexibility in terms of color choice. A good example of this is in Intranet applications. If most people access your pages with high-end browsers and monitors, you can work outside of the Web-safe palette. However, if you have a global audience, or one that uses computers of considerably varying quality, sticking to the Web-safe palette is wise.

The laughable fact is that even if you're extremely careful and use the 216-color palette, the variations among platforms, browsers, and monitor types will still render your colors inconsistent. To use it, or not? Weigh the knowledge you've gathered here with your awareness of your audience, and choose the lesser evil. Whether your audience will know the difference is the real question.



Book Reviewed at AbleStable®

Cascading Style Sheets: The Designer's Edge by Molly E. Holzschlag