HSL Colors Explained: Hue, Saturation, Lightness
HSL re-arranges RGB into three human-friendly dials: Hue (which color — an angle 0–360° around the color wheel), Saturation (how vivid, 0–100%) and Lightness (how close to black or white, 0–100%). Want a lighter button hover? Raise L. A muted background of your brand color? Drop S. That intuitiveness made hsl() a favorite in CSS.
| Angle | Hue |
|---|---|
| 0° | Red |
| 60° | Yellow |
| 120° | Green |
| 180° | Cyan |
| 240° | Blue |
| 300° | Magenta |
HSL in CSS
.btn { background: hsl(247 74% 63%); }
.btn:hover { background: hsl(247 74% 55%); } /* same hue, darker */
.btn-muted { background: hsl(247 30% 63%); } /* same hue, grayer */The catch: HSL lies about lightness
HSL treats all hues as equally bright at the same L — but human eyes don't. hsl(60 100% 50%) (yellow) looks far brighter than hsl(240 100% 50%) (blue) despite identical "lightness". For palettes that must look even — data visualizations, design-system scales — use OKLCH, where L matches perception. Use our converters: HSL to HEX, HSL to RGB, RGB to OKLCH.
HSL vs HSV
HSV's V measures distance from black only (100% = pure vivid color), while HSL's L runs black → color → white (100% = white). Design-tool pickers usually use HSV; CSS uses HSL. Same family, different vertical axis.