← Back to functions
CSS Function
hsl()
ColorDefines a color using hue, saturation, lightness, and optional alpha.
Syntax
hsl(h s% l%) or hsl(h s% l% / a)
Example
color: hsl(160 100% 62%);
Common use cases
- Intuitive color adjustments by lightness
- Color theming with hue rotation
- Accessible color systems
Practical developer insight
hsl() is often easier to tweak than rgb() — just change the lightness value to get a darker or lighter shade of the same hue. The old hsla() syntax is legacy.