HSL and HSV

HSL and HSV describe a color with three numbers that are easier to reason about than amounts of red, green and blue. Hue is an angle around a color wheel, with red at 0 degrees, green at 120 and blue at 240. Saturation says how far the color is from gray. The third number differs. HSL uses lightness, which runs from black through the pure color to white. HSV uses value, which runs from black to the pure color, with white reached by lowering saturation instead. HSV is also called HSB, for brightness.

Both were published in 1978 for computer paint programs. Alvy Ray Smith described HSV as a model of how a painter mixes tints and shades, and George Joblove and Donald Greenberg described HSL in the same year. Each is a geometric reshaping of the RGB cube rather than a new color space. Tip the cube onto its black corner and look down the gray diagonal, and the primary and secondary colors form a hexagon around it; hue is the angle around that hexagon. The math uses only the largest and smallest of the three channels, which mattered on 1970s hardware.

They made the familiar color picker possible, a hue slider beside a square of saturation against value or lightness. Image editors, design tools and CSS all expose them.

Their weakness is that the numbers are geometric, not perceptual. In HSL, pure yellow and pure blue both sit at 50 percent lightness, yet yellow looks far brighter. A palette generated by holding lightness and rotating hue comes out with uneven apparent brightness, which breaks text contrast in ways the numbers hide; see Color Contrast and Accessibility. Changing lightness can also shift perceived hue, so a blue drifts toward purple as it lightens. The models inherit whatever RGB space they're computed from, too, so the same HSL value looks different on displays with different primaries; see Color Gamut.

Perceptual color spaces fix this by building on measurements of human vision. CIELAB, standardized in 1976, and the newer OKLCH, based on a model published in 2020, keep the hue-and-chroma layout but scale lightness to match perceived brightness, so equal steps look like equal steps. Some of their combinations fall outside what a display can show, but for palettes and gradients they behave the way designers expect HSL to.

HSV still earns a place in computation. Code that needs to isolate a color, such as a green screen or a red ball in a video feed, works better on hue than on raw channels, because hue changes little under shadow. Shaders use it to rotate hues or animate palettes.