Tutorials References Menu

Colors HSL


HSL Calculator


 
rgb(255, 0, 0)
#ff0000


H:
S:
L:

HSL Colors

HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.

HSL stands for hue, saturation, and lightness.

HSL color values are specified with: hsl(hue, saturation, lightness).


Hue

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.


Saturation

Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.


Lightness

Lightness is also a percentage; 0% is black, 100% is white.


Try it Yourself

HSL color values are supported in all major browsers.

Example

<style>
div {
    background-color: hsl(180, 50%, 50%);
    color: hsl(0, 0%, 100%);
}
</style>

Try It Yourself »