HSL Color (Hue, Saturation, Lightness)

HSL color (hue, saturation, lightness) is a way of specifying a color using three intuitive numbers instead of raw light intensities. Hue is an angle from zero to 360 degrees around a color wheel — roughly zero for red, 120 for green, 240 for blue — so it names the color itself. Saturation is a percentage from gray at zero to full, vivid color at 100. Lightness is a percentage from black at zero, through the pure hue at fifty, to white at 100. Together those three coordinates place any color in a cylinder you can reason about the way you talk about color out loud: pick the color, decide how vivid it is, decide how light or dark it is. In CSS you write it directly, for example hsl(210, 90%, 45%) for a strong blue.

The appeal of HSL is that it maps to human perception and intention. When a designer says "make it a bit lighter" or "tone that down," HSL turns each request into a single, obvious adjustment — raise the lightness, lower the saturation. That makes color relationships explicit: shift the hue by set amounts and you generate a harmonious palette, hold hue and saturation while stepping lightness and you get a clean tint-and-shade scale. For building design systems, hover states, and accessible contrast, that predictability is a real practical advantage over juggling raw channel values, and modern CSS supports HSL natively so the model is usable directly in production styles.

RGB defines a color by mixing three channels of light — red, green, and blue — each from 0 to 255. That mirrors how a screen physically emits pixels, but it does not mirror how people think. To make an RGB blue slightly lighter you must raise all three channels in just the right proportion, because there is no single lightness control; get the ratios wrong and the hue shifts. HEX, the familiar #1E90FF notation, is simply RGB written in base sixteen — the same three channels in a compact form, with the same limitation. HSL rearranges the very same visible colors into coordinates that separate the properties people care about, so hue, vividness, and brightness each get their own knob.

None of these models is more colors than another for standard screen work — RGB, HEX, and HSL describe the same sRGB gamut, and browser dev tools let you cycle a swatch through all three. The difference is ergonomics. RGB and HEX are compact and universal and win where you just need to store or paste an exact value. HSL wins where you need to reason about or systematically vary color — generating palettes, building tint scales, tuning states — because the edits you want are single-axis moves. A sensible workflow uses HSL to design and adjust and any of the three to record the result, since they convert freely.

Use HSL wherever color needs to be systematic. Build palettes by holding saturation and lightness roughly steady while stepping hue for related accent colors, and build tint-and-shade scales by holding hue and saturation while stepping lightness. Derive hover, active, and disabled states from a base color with small, consistent lightness or saturation shifts, so the whole set stays coherent and easy to maintain. Because lightness is an explicit axis, HSL also makes it easier to reason about contrast when checking that text meets accessibility ratios, though you should still verify against a real contrast formula rather than eyeballing the lightness number.

The pitfalls are worth naming. HSL's lightness is not the same as perceived brightness — two colors at the same lightness value can look very different in intensity because the eye is more sensitive to some hues, so equal lightness does not guarantee equal contrast. Assuming HSL unlocks colors RGB cannot show is another misconception; on screen they cover the same gamut. And for wide-gamut or perceptually uniform work, newer models such as HSL's cousins in modern CSS may serve better. Use HSL for its readability and predictable edits, and verify contrast and appearance with the right tools rather than trusting the numbers blindly.

HSL, a cylindrical rearrangement of the RGB color model devised for human intuition, dates to computer-graphics work in the 1970s and is a standard CSS color notation.

Etymology: source.

Search interest for this term over the last five years:

View interest-over-time on Google Trends →

Areas of marketing where hsl color (hue, saturation, lightness) is a core concern: