HueSaturationLightness

Huesaturationlightness is a color model that describes colors using three components: hue, saturation, and lightness. It is a cylindrical-coordinate representation of points in the RGB color space, designed to express color in terms familiar to human perception of color type, vividness, and brightness. Hue defines the color family and is given as an angle around a color wheel, typically 0 to 360 degrees. Saturation measures colorfulness relative to gray, from 0% (greyscale) to 100% (full color). Lightness indicates brightness, ranging from 0% (black) through 50% (normal brightness) to 100% (white).

In practice, HSL is widely used in digital graphics and web design. In CSS, colors can be written as hsl(h, s%, l%) or hsla(h, s%, l%, a). For example, hsl(120, 100%, 50%) represents pure green, while hsl(0, 0%, 60%) yields a neutral gray. Converting between HSL and RGB involves established formulas; most programming languages and graphics tools provide library functions for these conversions. The hue circle makes it convenient to adjust color families, while changing lightness shifts the color toward black or white without altering its hue.

HSL is related to, but distinct from, HSV (Hue, Saturation, Value). HSL emphasizes lightness as a separate dimension, which can be more intuitive for shading and tinting, whereas HSV centers on brightness. Limitations include that HSL is not perceptually uniform, so equal steps in hue, saturation, or lightness do not always correspond to equal perceptual differences. Alternatives such as HSLuv or other perceptually uniform models address these issues for certain design workflows.