Design Nomenclature / Color
HSL
Also called hue saturation lightness
- Color
- Digital Model Making
- 2D & 3D
A cylindrical remapping of RGB into hue, saturation, and lightness, with L running 0 to 100% and every fully saturated hue landing at L 50%. That is a fact about the geometry, not about perception: HSL yellow and HSL blue at L 50% differ enormously in the lightness anyone actually sees.
In practice
Fine for generating variants of a known color, unreliable for building a value ramp. Two swatches at the same HSL lightness are not the same lightness.
Not to be confused with
- HSBRGB remapped to hue, saturation, and brightness, where B 100% is the brightest the display can render that hue — so pure yellow and pure blue both sit at B 100%. The model is a hexcone where HSL is a bicone. Neither is perceptual, and their S channels are not the same quantity.
- OKLChOKLab in cylindrical coordinates — lightness, chroma, hue angle. The arrangement designers actually want: hold L and sweep H and the swatches share an apparent lightness; hold H and drop C and the hue survives the fade. It is the first perceptual model to reach CSS with real browser support behind it.
- ValueHow light or dark a color is, independent of hue and chroma — the one attribute that survives conversion to greyscale. Value does the structural work: legibility, depth, and figure-ground separation all rest on value difference far more than on hue difference, and a composition that fails in greyscale was leaning on hue to hide it.