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), so it is 50% at the top edge of our cone illustration. Toward the center, brightness increases as saturation decreases. At 0% or 100% 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 lightness (HSL). The distinction between levels of brightness is actually logarithmic, not linear as the HSB scale would imply.

Color contrast

What is important to the viewer is the visible contrast between two colors, regardless of hue; this is called the luminance ratio. It is also 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.

Our "Tutor" page will let you experiment with how both the HSB/HSL and RGB systems work, as well as determine the luminance ratio between colors.

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