A Complete Guide to Web Design

30 Chapter 3 – Web Design Principles for Print Designers

Color on the Web

Web Design in a Nutshell, eMatter Edition

For system-level operations, computers use a specific set of 256 colors called the

system palette. Macs and PCs use a slightly different set of 256 colors in their

system palettes. But specific applications may specify a different palette; for

instance, browsers use their own palette, which is substantially different than the

Windows system palette (although it’s quite similar to the Mac system palette.)

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

fying 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.

Gamma

Gammarefers 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 created on a Macintosh

will generally look a lot darker when viewed on a PC or Unix terminal. Images

created on a PC will generally look washed out when seen on a Mac. The higher

the gamma value, the darker the display. Table 3-1 shows the standard gamma

settings for the major platforms.

One strategy for designing graphics that look acceptable on all platforms is to cali-

brate your own monitor to a gamma setting of 2.2, a value that is between

Macintosh’s 1.8 and the PC’s 2.5. Bear in mind that your images will look a bit

lighter on most Macs and a bit darker on most PCs and Unix terminals than they

appear on your screen, but the jump won’t be as drastic as going from one plat-

form to another.

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

great 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.)

Table 3-1: Common Default Gamma Settings

Platform Gamma

Macintosh 1.8

PC 2.5

Unix 2.3-2.5