Back to the Web Design Home Page Buy Now - available at Amazon.com
Overview Chapters Examples Resources
Chapters
Complete Chapters
Chapter 1

Chapter 5

Chapter 9

Chapter 13

Appendix B



Check Out These Other Books!

Chapter 13: Color
Troublesome Color Reproduction Issues
There are many other issues that can affect the display of colors on the Web. This section will discuss several of them, including color shifting, gamma correction, and types of monitors. Remember, while you may develop your designs on a 21-inch top-of-the-line monitor, your users will probably be viewing your creation on something much different.

Color Shifting and the Reality of the Web Palette
Here's the bad news: even the Web-safe palette isn't Web-safe under many conditions. The monitor does not really determine the number of colors that can be displayed. The number of available colors is actually defined by the computer's video card. In our lowest common denominator scenario of 256 colors, 8 bits are employed to display colors. (Remember: 2 to the 8th power is 256.) For more colors, the computer must allocate more memory to process colors. High color (16-bit) produces over 65,000 colors, while 24-bit provides literally millions of colors. This may really be overkill, as studies have shown that the average person cannot tell 16-bit and 24-bit color apart. On the other hand, 8-bit and 16-bit are fairly easy to distinguish.

For reasons of simple mathematics, 16-bit displays have some problems with the accurate display of the 216 Web-safe or browser-safe colors discussed earlier in this chapter. High color monitors were originally intended for print designers, who work with CMYK—a four-value system—rather than RGB—a three-value system. If you're working in CMYK, 16 divided by 4 yields a handy 4 bits per color channel. But if you're working in RGB, you run up against a troublesome issue. You can't split a bit, so in 16-bit RGB you wind up with 5 bits per color channel; the 16th bit either vanishes into some electronic limbo or is assigned arbitrarily to one of the three channels, depending on the system. A color channel with 5 bits can produce 32 different colors; raise that to the power of 3, and you get 32,768 colors—not quite the 65,000+ you'd get in CMYK. Ever get the feeling you're being cheated?

The Web-safe palette, on the other hand, divides each color channel into six values. Because 32 can't be divided exactly by 6, the colors defined by the Web-safe palette won't necessarily match the colors defined by a 16-bit color setting. Thus, on some systems, some of the Web-safe colors may shift their values slightly. It turns out that only about 22 of the supposed Web-safe colors don't shift at all. The Web-safe color palette appears to be unsafe! To many Web designers, this is the equivalent of saying the earth is flat, but it is true. See http://www.morecrayons.com for links to articles that go into great detail on this issue.

Given this potentially earth-shattering information, should a designer even care about the Web-safe colors anymore? The answer: probably not as much. An alternative palette that is more 16-bit friendly contains 4096 colors and can also be found at http://www.morecrayons.com. This certainly helps increase what we can design with and addresses the majority of Web users—but you might wonder if color shifts occur on a 24-bit display and how 8-bit folks will view your site? You might just want to stick to primary colors, as many designers do. Other designers just completely ignore the problem and design with the full 16-bit palette. Finally, you could use JavaScript to detect for bit-depth and go from there, but that could get complex.

To add even more complexity to the color shifting issue, different components of a Web page may be affected differently. Remember, a Web browser is a program; the part of that program that processes GIF images may process a certain color one way, while the part of that program that processes HTML may shift the same value somewhat differently when rendering a background color. This can result in an image not matching a background, even though you've taken great pains to keep that shade of red to the correct value. More information on this issue can be found at http://www.macromedia.com/go/13901/. The unpredictable nature of interactions between video cards and monitors is further compounded by the rendering inconsistencies of the browsers themselves.


Next: Gamma Correction


Overview | Chapters | Examples | Resources | Buy the Book!
Available at Amazon.com Available at Amazon.com