hsl

HSL stands for Hue, Saturation, and Lightness, a color model that represents colors using cylindrical coordinates derived from the RGB color space. In this model, hue corresponds to the angle around a color wheel, measured in degrees from 0 to 360, with 0° typically representing red. Saturation indicates the color’s chroma or vividness, expressed as a percentage from 0% (gray) to 100% (full color). Lightness, also a percentage from 0% to 100%, describes the perceived brightness, where 0% is black, 100% is white, and 50% is nominal brightness.

In practice, HSL is widely used in digital design and graphics software, and is a standard in web technologies. In CSS, for example, colors can be specified with the hsl() or hsla() functions, using hue in degrees and saturation and lightness in percent. HSL palettes are convenient for creating harmonious schemes, because adjusting lightness yields tints and shades while saturation controls color purity.

HSL is a perceptual color model derived from RGB, but it is not perceptually uniform; equal steps in hue, saturation, or lightness do not always produce equal perceptual differences. Converting between HSL and RGB involves non-linear transformations, and various tools may implement these conversions slightly differently.

Examples: hsl(0, 100%, 50%) yields pure red; hsl(120, 100%, 50%) yields pure green; hsl(240, 100%, 50%) yields pure blue. It is commonly used in user interfaces, design systems, and accessibility work to adjust color relationships in a predictable, intuitive way.