HSL
hsl() expresses colors by hue, saturation, and lightness. It is often easier to reason about than raw channel values when building palettes and theme variations.
Overview
hsl() expresses colors by hue, saturation, and lightness. It is often easier to reason about than raw channel values when building palettes and theme variations.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3.1 | 18 | 2 | |
| CSS type | ||||||
hsl.alpha parameter Alpha parameter | 65 | 79 | 52 | 12.1 | 65 | 12.2 |
hsl.mixed type parameters Mix `<percentage>` and `<number>` in parameters | 121 | 121 | 122 | 18 | 121 | 18 |
hsl.space separated parameters Space-separated parameters | 65 | 79 | 52 | 12.1 | 65 | 12.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.primary {
color: hsl(220, 80%, 50%);
}
.overlay {
background: hsl(0 0% 0% / 0.5);
}Live demo
Use cases
Palette tuning
Adjust lightness or saturation systematically when building semantic color sets.
Theme variation
Create hover, active, and muted states from a base hue with more readable intent.
Cautions
- HSL can be intuitive, but perceived brightness still varies across hues, so numerical lightness is not a full contrast guarantee.
- Token naming and documentation remain important even when the color function is readable.
Accessibility
- Use HSL to support systematic palettes, but always verify the resulting contrast in real UI contexts.
Related links
Powered by web-features