hsl()
A color by hue, saturation and lightness.
Syntax
hsl(hue saturation lightness / alpha)Parameters
| Parameter | Type | Description |
|---|---|---|
| hue | angle | The position on the color wheel from 0 to 360: 0 is red, 120 green, 240 blue. |
| saturation | percentage | From `0%` (gray) to `100%` (vivid). |
| lightness | percentage | From `0%` (black) to `100%` (white). |
| alpha | 0–1 | After a slash: opacity. |
Examples
Shades of one hue — only the lightness changes:
<style>
div { padding: 8px; color: white; }
</style>
<div style="background: hsl(210 80% 30%);">hsl(210 80% 30%)</div>
<div style="background: hsl(210 80% 50%);">hsl(210 80% 50%)</div>
<div style="background: hsl(210 80% 70%);">hsl(210 80% 70%)</div>Notes
HSL is easy to read and edit by hand. Its drawback: colors with the same lightness do not look equally bright (yellow seems lighter than blue). oklch() fixes this.
See also
In the tutorial
- Colors — Text and background color, ways to write a color in CSS — names, hex, rgb() and hsl() — and transparency.