hsl()
The hsl() function defines a color by hue, saturation, and lightness plus an optional alpha.
Syntax
hsl(H S L / A)Examples
:root { --h: 265; }
.btn { background: hsl(var(--h) 80% 55%); }
.btn:hover { background: hsl(var(--h) 80% 45%); }
Output
Renders a purple button that darkens on hover by lowering only the lightness value.
Notes
Intuitive for generating shade variants by adjusting L. Hue is in degrees, S and L are percentages. Note that HSL lightness is not perceptually uniform across hues; oklch() fixes this.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 3.1 |
| edge | 12 |