A Complete Guide to Web Design

304 Chapter 17 – Designing Graphics with the Web Palette

The Web Palette

Web Design in a Nutshell, eMatter Edition

The Web Palette is also known as the Netscape Palette, Web 216, Netscape 216,

Browser-Safe Palette, Web-Safe Palette, Nondithering Palette, and the 6× 6 ×6 cube.

Colors in the Web Palette are defined by their 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. It’s easy to recognize a web-safe color because it will consist of

combinations of only six possible values (shown in Table 17-1).

There are three systems used for defining RGB values, which are used in different

situations:

Decimal

RGB values are identified by their decimal values in the color pickers of

image-editing software such as Photoshop. Web-safe values are multiples of

51, ranging from 0 to 255.

Hexadecimal

This is the base-16 numbering system used in programming languages and in

HTML. (See Chapter 5,HTML Overview.)

Percentage

In some instances, you will need to identify web values by their percentage

equivalents. Some Macintosh applications rely on the Apple Color Picker,

which lists RGB values by percent. Web-safe values are multiples of 20%.

Table 17-1 shows the decimal, hexadecimal, and percentage values for each of the

six shades in the Web Palette. Depending on the software you are using to create

graphics, colors may be identified using any (or all) of these numbering systems.

Web Palette on 16-Bit Displays

Because 16-bit displays must approximate colors from the true color space,

slight color shifting and dithering may occur even if you choose colors from

the “safe” web palette.

This is most noticeable for pages with graphics that are intended to blend

seamlessly with a tiled background graphic or specified background color.

Although the foreground and background elements may have identical web-

safe RGB values, on 16-bit displays, colors shift and dither in a way that

causes the “seams” to be slightly visible.

Which elements shift and which get dithered seems to depend on the

browser and operating system combination, so it’s difficult to anticipate. If

the mismatched colors concern you, making the edges of your graphics

transparent instead of a matching color may help eliminate the dithered rect-

angles on 16-bit displays.