A Complete Guide to Web Design

32 Chapter 3 – Web Design Principles for Print Designers

Color on the Web

Web Design in a Nutshell, eMatter Edition

that requires only six characters to describe an RGB color. The hexadecimal

equivalent of 51-51-255 is 3333FF.

Percentage

The Apple Color Picker specifies colors in percentages, not absolute RGB

decimal values. For Macintosh programs that rely on the Apple Color Picker

(such as Claris HomePage and Adobe PageMill), you’ll need to be able to

convert percentage values to true decimal values. The percentage value equiv-

alent of 51-51-255 is 20%-20%-100%.

Table 3-2 shows the decimal, hexadecimal, and percentage values for each of the

six component values in the Web Palette.

Reducing to the Web Palette

Colors on a web page are forced to adapt to the browser’s Web Palette. The only

way to ensure that all users will see your colors as you intend them is to use web-

safe colors when you design the page. (See “Designing with the Web Palette” in

this chapter.)

Colors in Images

Browsers attempt to approximate the colors in an image by dithering, mixing

pixels of similar colors available in the palette. For photographic images, the

effects of dithering are usually not detrimental (and in some cases may be

beneficial). However, in areas of flat color (such as in a logo or line-art illus-

tration), the random dot pattern caused by dithering may be undesirable.

Chapter 17, Designing Graphics with the Web Palette, discusses techniques

and tools for applying the palette to graphics during the design and produc-

tion process.

Colors in the HTML document

Colors specified in the HTML document, such as background and text colors,

will usually be replaced by the nearest available Web Palette color (Internet

Explorer may dither background colors). This effect is calledcolor shifting

and it can result in a large discrepancy between how a color (as defined by its

RGB values) is rendered on a 24-bit display versus an 8-bit display.

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 advan-

Table 3-2: 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%