Color · 0–360 degrees
HSL color
Hue in degrees, saturation and lightness in percent.
Key facts
| Hue | 0–360 degrees |
|---|---|
| Saturation | 0%–100% |
| Lightness | 0%–100% |
| Syntax | hsl(210 50% 40% / 0.5) |
| Lightness 50% | Full chroma for a given hue |
| Model | Cylindrical re-coordination of RGB |
What each channel does
Hue selects the angle on the color wheel: 0° red, 120° green, 240° blue. Saturation controls how far the color is from gray. Lightness sets how much black or white is mixed in: 0% is black, 100% is white, and 50% is the pure hue at full saturation.
Why HSL is not perceptually even
Equal steps in HSL do not look like equal steps to the eye: yellow at 50% lightness appears much brighter than blue at the same lightness. HSL is convenient for picking colors and building palettes, not for measuring perceived brightness or contrast.
Frequently asked questions
Is HSL the same as HSV?
No. HSL's third channel is lightness (black to white), HSV's is value or brightness. The same numbers produce different colors.
Why does hsl(0 0% 50%) look gray?
Zero saturation removes the hue, leaving a neutral gray at that lightness.
Can HSL represent every sRGB color?
Yes, within sRGB. It is a different coordinate system for the same gamut.