HSL Color Model: A Practical Guide for CSS
Read hue, saturation and lightness, try a controlled color change, and understand why equal HSL lightness does not mean equal contrast.
Updated : Rechecked technical claims, replaced unsupported generalizations, and added reproducible examples and source links.
HSL reorganizes sRGB into hue angle, saturation and lightness. It can make an edit such as rotating a hue easier to express than changing three RGB channels. HEX and HSL can describe the same sRGB color; neither notation makes a design more accessible by itself.
Read one concrete value
.sample { background: hsl(0 100% 50%); }
/* Equivalent opaque sRGB color: #FF0000 */
.sample-soft { background: hsl(0 50% 50%); }
.sample-light { background: hsl(0 100% 75%); }The first sample is red. The second reduces saturation while holding the numeric hue and lightness. The third changes lightness. Compare each next to the unchanged sample to learn what one dimension does before building a multi-step palette.
Do not confuse HSL L with luminance
A reproducible text and background example.
Same pair, larger text.
##FFFF00 / ##FFFFFF
Yellow: hsl(60 100% 50%) on white.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixA reproducible text and background example.
Same pair, larger text.
##0000FF / ##FFFFFF
Blue: hsl(240 100% 50%) on white.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixThe shared 50% lightness value describes the RGB construction, not equal perceptual brightness. The calculated results below each example show the consequence for white backgrounds. You cannot infer a passing pair from a fixed difference in HSL lightness.
Handle hue and neutral colors deliberately
Hue wraps around a circle: 360 degrees returns to zero. At zero saturation the result is gray and hue no longer changes its appearance. A color tool may retain a hue for later editing or report zero; record the actual HEX when exact equality matters.
Convert a value and round consciously
Use the converter to inspect the HSL for a known HEX, then copy the representation your stylesheet needs. Color Match rounds displayed HSL components, so converting that rounded text back may differ by a small RGB amount. Preserve the original HEX when byte-for-byte fidelity is the priority.