Tutorials References Exercises Bootcamps Videos Menu
Sign Up Create Website Get Certified Upgrade

Colors HSL and HSLA

HSL Calculator

rgb(255, 0, 0)


HSL Colors

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

HSL stands for Hue, Saturation, and Lightness.

HSL color values are specified with:

hsl(hue, saturation, lightness)


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


Saturation can be described as the intensity of a color. It is a percentage value from 0% to 100%.

100% is full color, no shades of gray.

50% is 50% gray, but you can still see the color.

0% is completely gray; you can no longer see the color.


The lightness of a color can be described as how much light you want to give the color, where 0% means no light (dark), 50% means 50% light (neither dark nor light), and 100% means full light.

Try it Yourself

HSL color values are supported in all major browsers.


div {
    background-color: hsl(170, 50%, 50%);
    color: hsl(0, 50%, 50%);
Try It Yourself »

HSLA Color Values

HSLA color values are an extension of HSL color values, with an Alpha channel - which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):


<h1 style="background-color:hsla(120, 100%, 50%, 0.2);">hsla(0, 100%, 50%, 0.2)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.4);">hsla(0, 100%, 50%, 0.4)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.6);">hsla(0, 100%, 50%, 0.6)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.8);">hsla(0, 100%, 50%, 0.8)</h1>
Try it Yourself »