CSS hsl() Function

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.

Example

#

An element with a background color calculated by the hsl function.

An hsl background color
<style>
  .hsl-example {
    padding: 30px;
    background-color: hsl(9, 65%, 90%);
  }
</style>

<div class="hsl-example">An hsl background color</div>

Syntax

hsl(hue, saturation, lightness);

Values

#

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.

Browser support

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

You may also like

Guides