HSB: hue, saturation, and brightness

This scheme provides a device-independent way to describe color. HSB may be the most complex scheme to visualize, especially since color selection software has to reduce its three descriptive dimensions to two dimensions on the monitor screen. But once learned, it can be useful in many instances.

The easiest way to visualize this scheme is to think of the H, S, and B values representing points within an upside-down cone. At the edge of the cone base, think of the visible light spectrum (preceeding page), cut from the page and pasted into a circle with shading added to smooth the transition between the (now joined) red and magenta ends.

Light color diagram, description follows

Hue is the actual color. It is measured in angular degrees counter-clockwise around the cone starting and ending at red = 0 or 360 (so yellow = 60, green = 120, etc.).

Saturation is the purity of the color, measured in percent from the center of the cone (0) to the surface (100). At 0% saturation, hue is meaningless.

Brightness is measured in percent from black (0) to white (100). At 0% brightness, both hue and saturation are meaningless.

Brightness as it is described here refers only to relative values within a source that we are looking at (for example, a display screen or printed document). It is also called value or luminance. The distinction between levels of brightness is actually logarithmic, not linear as the HSB scale would imply.

Color (luminance) contrast

The “B” scale of HSB is used to determine the contrast between two colors, regardless of hue; this is usually called the luminance ratio. It is important to Web designers, since a ratio of less than 5:1 between text and background (10:1 for small text) can be very difficult for many people to read.

We now offer a “Color Tutor” Java application that will let you experiment with how both the HSB and RGB systems work, as well as determining the contrast between colors. Please see the Tutor page or follow the Tutor link at left.

Gamut

Remember that the HSB system describes color independently of whatever physical system we are talking about. No two computer monitors can produce exactly the same colors; nor can two printers—and the colors you see on a monitor can be very different from those you see in print and those you see in “real life.”

The actual set of colors that a given device can reproduce is called the color gamut of the device. Important to professional graphic artists and photographers, gamut information is probably beyond the needs of most Web developers. For detailed information, you might refer to the Wikipedia article on this topic (opens in a new window).