Web Style Guide 3rd Edition

11 Graphics
Sidebar: Color Terminology

Color is the response of our eye and brain to various wavelengths of light. Readers with normal vision can sense wavelengths of light from 400 nanometers (near ultraviolet) to 700 nm (near infrared).

Computer screens use an additive color system that combines phosphors of red, green, and blue primary colors, which, when added together in various proportions, produce the more than 16 million colors possible on RGB screens. The maximum brightness of all three RGB primaries produces white light on the screen.

A diagram that shows the colors of the visible light spectrum, and also shows how areas of pure red, green, and blue light combine to produce the other major colors, plus white light.

In computer graphics you’ll see these common terms used to describe the characteristics of colors, known as the HSB color system (for hue, saturation, and brightness), commonly used in graphics programs like Adobe Photoshop.

Hue

Hue is the wavelength of color along the spectrum of visible light. An easy way to think about hue is as a color name: “yellow,” “orange,” or “red.”

Saturation

Saturation describes the intensity of a color, ranging from pure high-chroma colors to near-gray versions. Saturation is useful to signal depth in displays. In daily life we expect faraway objects to look desaturated and gray because of atmospheric effects (atmospheric perspective) and foreground objects to be more intensely colored. Thus in design we often use desaturated colors for backgrounds and draw attention by using full-saturated colors (sparingly!).