Definition: HSB

(Hue Saturation Brightness) A color space (color model) that is widely used to select a color in a paint program, image editing or other graphics application. HSB was developed by Alvy Ray Smith at PARC in 1974 to enable users to select colors in software as artists traditionally had done in oils by adding black and white to pure pigments. It was soon incorporated into SuperPaint, one of the first paint programs, letting users select colors more intuitively than by adjusting RGB or CMYK colors. Today, HSB continues to let users easily make color adjustments.

Hue, Saturation and Brightness
Called "HSV" by its inventor with the V meaning "value," the hue (H) is the color pigment represented by a 360-degree circle (0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta). The saturation (S) is the amount of white added, and the brightness (B) the amount of black. Both S and B are measured from 0 to 100% or from 0 to 1.

HSB and HSL
HSB and HSL, which was created by George Joblove in 1978, are the most widely used hue-based models for color selection in graphics applications. For example, in Photoshop, HSB is used to select a color, and HSL is used to change colors in an image. HSB and HSL are mathematical subsets of the CIE Lab model and are not based on actual human perception of colors as is CIE Lab. Although not shown in this definition, HSB and HSL are often expressed geometrically as an inverted cone and double cone: H is the angle around the axis; S measures from the axis outward and B/L from top to bottom.

Although both models are based on the hue, saturation and brightness/lightness triplet, hue (H) is similar, but saturation (S) and brightness/lightness (B/L) are not. One of the main differences is that in HSB, the B dimension includes nothing about the whiteness of the color, only its blackness, whereas in HSL, the L axis carries both white and black information. See HSL, CIE Lab and color space.

The Photoshop Color Picker

This Photoshop control is used to select a color by pointing in the box or moving the vertical slider. The same color is depicted in HSB, RGB, CIE Lab and CMYK color spaces, and users can choose whichever model they wish to make adjustments.

Used in SuperPaint

When HSB was added to this early paint program in the 1970s, it let video and graphics people select colors like an artist. There were no color pickers like the Photoshop dialog above. (Image courtesy of Richard Shoup.)

From Red to Pink

HSB and HSL use different approaches to changing colors. With HSB, Saturation is adjusted to move between red and pink. However, in HSL, the Lightness is adjusted.