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.

HSB 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 of the picture, brightness increases as saturation decreases, although they are actually separate controls. 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/HSL scale would imply.

With this model, there are 360×100×100 = 3.6 million possible color choices. Although the human eye—in theory— can distinguish 2–3 times this many shades, HSB/HSL is more than adequate for any use on the Web. See how it works on our HSL demo page (new tab).

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 insufficient contrast between text and background can be very difficult for many people to read. Exact values can be found in the W3C's Web Content Accessibility Guidelines (WCAG).

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