The hsl function returns a color based on hue, saturation, and lightness.
This function can be used by any property that requires a color value.
An element with a background color calculated by the hsl function.
<style>
.hsl-example {
padding: 30px;
background-color: hsl(9, 65%, 90%);
}
</style>
<div class="hsl-example">An hsl background color</div>
hsl(hue, saturation, lightness);
| Value | Description |
|---|---|
hue |
An angle in the color wheel; 0 or 360 represents red, 120 is green, 240 is blue. |
saturation |
Color saturation; 0% is a shade of gray and 100% is full color. |
lightness |
Color lightness; 0% is dark, 50% is normal, and 100% is light. |
This table shows when hsl support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
9.5 | Jun 2008 |
 Safari
|
3.1 | Mar 2008 |
