CSS Function
hsl()
The hsl() function defines colors using Hue, Saturation, and Lightness, providing an intuitive cylindrical color model.
Syntax
hsl(H S L / alpha)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| H | number | angle | Yes | Hue angle in degrees (0-360). 0=red, 120=green, 240=blue |
| S | percentage | Yes | Saturation, 0% (gray) to 100% (full color) |
| L | percentage | Yes | Lightness, 0% (black) to 100% (white), 50% is pure color |
| alpha | number | percentage | No | Opacity, from 0 to 1 |
Examples
Pure red
Fully saturated red at mid-lightness.
css
color: hsl(0 100% 50%);Desaturated blue
A muted slate blue.
css
background: hsl(217 30% 60%);Tailwind arbitrary value
HSL color in Tailwind.
html
<div class="bg-[hsl(217_91%_60%)]">Blue</div>Browser Support
✓
Chrome
v1++
✓
Firefox
v1++
✓
Safari
v3.1++
✓
Edge
v12++
✓
Opera
v9.5++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
Use arbitrary values: bg-[hsl(217_91%_60%)]Frequently Asked Questions
Why is HSL considered better than RGB for humans?▼
HSL separates hue from brightness and saturation, making it easier to create variations of a color by adjusting one parameter.
Is hsla() deprecated?▼
No, but it is unnecessary. Modern hsl() accepts an alpha parameter via the / syntax, making hsla() redundant.
Explore CSS Color Tools
Try our free tools to work with hsl() and other CSS color functions.
Open Tools