Color on the Web (Web Design in a Nutshell, 2nd Edition)

3.3. Color on the Web

The Web requires designers to think about color in new ways. In part, it means understanding color in a more technical manner -- the appearance of a page can benefit greatly if a designer knows what's going on "under the hood." The peculiarities of working with color in web design are functions of the following simple principles:

Monitors: Web pages are displayed on computer monitors, therefore they follow the basic rules of how computers and monitors handle color.

Browsers: Because browsers have built-in resources for rendering color when running on systems with limited color display capacity, they can alter the appearance of the colors in your pages.

HTML

3.3.1. Color on Computer Monitors

Color on monitors is made of light, so traditional systems for specifying color for print (CMYK, Pantone swatches, etc.) do not apply. Monitors differ in the number of colors they can display at a time. On the high end, 24-bit monitors are capable of displaying nearly 17 million colors. 16-bit monitors can display over 65 thousand colors. On the low end, 8-bit monitors are able to display only 256 colors at a time.

3.3.1.1. RGB color

Computer monitors display colors by combining red, green, and blue light. This color system is known as RGB color.

RGB color is a 24-bit system, with eight bits of data devoted to each of three color channels. Eight bits of data can describe 256 colors. With 256 possible colors in each of the three channels, the total possible number of colors is calculated by multiplying 256 256 × 256 for a total of 16,777,216. That's more than enough colors to provide stunning representations of artwork and photography. 24-bit color is often referred to as the true color space.

Although all colors on computer monitors are made up of combinations of red, green, and blue light, there are actually a number of numerical systems for identifying colors, including RGB (red, green, and blue values), Lab (lightness, a channel, and b channel), and HSB (hue, saturation, brightness).

For purposes of web design, colors are referred to by their numerical RGB values, on a scale from 0 to 255. For instance, the RGB values for a particular dark orange color are R:198, G:83, B:52.

3.3.1.2. Palettes

Colors from the true color space can be approximated reasonably well on 16-bit monitors (see the sidebar "Color Issues on 16-Bit Displays" later in this chapter). 8-bit monitors make use of a color palette, a set 256 colors, to determine which colors to display at any one time.

For system-level operations, computers use a specific set of 256 colors called the system palette. Macs and PCs use slightly different sets of 256 colors in their system palettes. But specific applications may use their own palettes; for instance, browsers have a built-in palette, known as the web palette, which gets called into use only when the browser is used on an 8-bit monitor.

3.3.1.3. Gamma

Gamma refers to the overall brightness of a computer monitor's display. In more technical terms, it is a numerical adjustment for the nonlinear relationship of voltage to light intensity -- but feel free to think of it as brightness. The default gamma setting varies from platform to platform. Images and pages created on a Macintosh generally look a lot darker when viewed on a Windows or Unix/Linux system. Images created on Windows machine generally look washed out when seen on a Mac. The higher the gamma value, the darker the display. Table 3-3 shows the standard gamma settings for the major platforms.

Table 3-3. Common default gamma settings

Platform	Gamma
Macintosh	1.8
PC	2.2
Unix	2.3-2.5

Because the vast majority of users are viewing the Web from the Windows environment, gamma differences are of particular concern to developers who are designing pages and graphics on a Macintosh. However, if you are designing under Windows and anticipate a large percentage of Mac traffic to your site (such as a site for graphic designers), be sure to test your pages under Macintosh gamma conditions.

Several popular web graphics tools come with utilities for simulating or adjusting gamma levels:

Adobe Photoshop Gamma Control Panel

Adobe ImageReady Gamma Simulator

Macromedia Fireworks Gamma Preview

3.3.2. Color in Browsers ( The Web Palette)

An interesting problem arises when colors from the full 24-bit color space need to be displayed on an 8-bit display. Rather than relying on the computer's system palette, browsers reduce and remap colors to their own built-in palette. This is a benefit to web designers because it guarantees that images will look more or less the same on all 8-bit systems. If images were mapped to the various system palettes, they would look quite different on different platforms. (Note that if the browser is running on a 24-bit display, the palette does not come into effect and all colors will be displayed accurately.)

This web palette consists of the 216 colors shared by the Macintosh and Windows system palettes; therefore, colors chosen from the web palette render accurately on Mac or Windows displays. The web palette was optimized for Macs and Windows; Unix machines use a different color model for their system palette, so "web-safe" colors may shift or dither when viewed on Unix systems.

The web palette is also known as the Netscape Palette, Netscape 216, Browser-Safe Palette, Web-Safe Palette, Non-dithering Palette, and the 6 6 × 6 cube. The web palette is displayed at http://www.learningwebdesign.com/webpalette.html.

3.3.2.1. Shifting and dithering

When a browser running on an 8-bit monitor encounters a color, it does its best to approximate it using colors from the web palette. This can happen in two ways: shifting and dithering.

Sometimes colors are simply replaced by, or shift to, the nearest available web palette color. This is common in colors specified in the HTML document, such as background or table colors, although colors can shift in images as well. Color shifting can result in large discrepancies between how a color (as defined by its RGB values) is rendered on a 24-bit display versus an 8-bit display.

Browsers may also approximate a color by dithering, mixing pixels of similar colors available in the palette, resulting in a random dot pattern. This is common in images, although Internet Explorer may dither background colors as well. For photographic images, the effects of dithering usually are not detrimental (and in some cases may be beneficial). However, in areas of flat color (such as in a logo or line-art illustration), the speckle pattern is usually undesirable.

Color Issues on 16-Bit Displays

As of this writing, approximately half of all users view the Web on 16-bit monitors capable of displaying over 65,000 colors. While this is plenty of colors, they are unfortunately not the same colors found in the 24-bit true color space. This means that the RGB colors you specify in HTML or select in a graphics program (even "web-safe" colors) are always approximated on 16-bit displays, resulting in subtle shifting or dithering.

This effect is most noticeable when trying to match a graphic exactly to a background tile or color specified in HTML. Despite the fact that the foreground and background elements may have numerically identical RGB values, the "seam" may still be slightly visible on 16-bit displays. The only way to prevent this mismatch is to make the edges of the graphic transparent instead of a solid color, allowing the background color to show through.

For an in-depth yet understandable explanation of how 16-bit displays handle color at the mathematical level, I highly recommend reading "Death of the Websafe Color Palette?" by David Lehn and Hadley Stern on Webmonkey (http://hotwired.lycos.com/webmonkey/00/37/index2a.html).

3.3.2.2. The web palette in numbers

An important way to look at the web palette is by its numerical values. The web palette recognizes six shades of red, six shades of green, and six shades of blue, resulting in 216 possible color values (6 6 × 6 = 216). This is sometimes referred to as the 6 6 × 6 color cube. Figure 3-2 shows the cubic nature of this palette.

Figure 3-2. The 6 6 × 6 color cube of the web palette

There are three systems used for defining RGB values. Which one you use depends on the requirements of your software:

Decimal

Hexadecimal

Percentage: A few older programs for the Macintosh use the Apple Color Picker to specify colors in percentages, not absolute RGB decimal values. Web-safe color values are in increments of 20%. The percentage value equivalent of 51-51-255 is 20%-20%-100%.

Table 3-4 shows the decimal, hexadecimal, and percentage values for each of the six component values in the web palette.

Table 3-4. Numerical values for web palette colors

Decimal	Hexadecimal	Percentage
0 (darkest)	00	0%
51	33	20%
102	66	40%
153	99	60%
204	CC	80%
255 (lightest)	FF	100%

3.3.3. Designing with the Web Palette

While the web palette can lead to unpredictable and undesirable effects such as dithering or color shifting on 8-bit monitors, you can also use it to your advantage. Because you know exactly which colors will render accurately on Macs and Windows machines, you can use these colors exclusively when designing your graphics and HTML pages. It requires a little extra effort and means sacrificing color selection, but the advantage is that you'll be able to predict what the pages will look like for all users. Using web-safe colors in graphics production is discussed in Chapter 22, "Designing Graphics with the Web Palette".

If you choose to add color to the background and text on your web pages, chances are you'll need to do some experimenting with color to get the combinations just right. There are a number of tools and options for selecting web-safe colors and incorporating them into your designs.

There is a bug in Navigator 4.0 on the Macintosh that prevents system colors from seeping in, resulting in inferior image quality on 8-bit monitors. But chances are this problem affects few users, so it's nothing to worry about.