CSS hsl() and hsla() Function or Color Code

This article is created to cover hsl() and hsla() function or color code/value in CSS. These two functions are used to create combination of colors.

CSS hsl() Function

The CSS hsl() function is used to color the background/text based on the following three parameters:

Hue
Saturation
Lightness

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{color: white; padding: 12px;}
      .a{background: hsl(0, 100%, 50%);}
      .b{background: hsl(0, 100%, 30%);}
      .c{background: hsl(0, 100%, 70%);}
      .d{background: hsl(120, 100%, 50%);}
      .e{background: hsl(240, 100%, 50%);}
      .f{background: hsl(240, 0%, 50%);}
   </style>
</head>
<body>
   
   <p class="a">background: hsl(0, 100%, 50%)</p>
   <p class="b">background: hsl(0, 100%, 30%)</p>
   <p class="c">background: hsl(0, 100%, 70%)</p>
   <p class="d">background: hsl(120, 100%, 50%)</p>
   <p class="e">background: hsl(240, 100%, 50%)</p>
   <p class="f">background: hsl(240, 0%, 50%)</p>
   
</body>
</html>

Output

background: hsl(0, 100%, 50%)

background: hsl(0, 100%, 30%)

background: hsl(0, 100%, 70%)

background: hsl(120, 100%, 50%)

background: hsl(240, 100%, 50%)

background: hsl(240, 0%, 50%)

CSS hsl() Function Syntax

The syntax of hsl() function in CSS, is:

hsl(hue, saturation, lightness)

hue - Defines the degree, from 0 to 360. The 0 and 360 both refers to red, 120 refers to green, and 240 refers to blue.

saturation - Defines the color saturation. Give 100% to use the full color, and 0% to provide the shade of gray color.

lightness - Defines the lightness of the color. Give 100% to make the color white, 0% to make the color black, regardless of other parameter's value.

CSS hsla() Function

The CSS hsla() function is used to color the background/text based on the following four parameters:

Hue
Saturation
Lightness
alpha (opacity)

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{color: white; padding: 12px;}
      .a{background: hsla(0, 100%, 50%, .1);}
      .b{background: hsla(0, 100%, 50%, .4);}
      .c{background: hsla(0, 100%, 50%, 1);}
      .d{background: hsla(0, 100%, 30%, .8);}
      .e{background: hsla(0, 100%, 70%, .4);}
      .f{background: hsla(120, 100%, 50%, .64);}
      .g{background: hsla(240, 100%, 50%, 1);}
      .h{background: hsla(240, 0%, 50%, .6);}
   </style>
</head>
<body>
   
   <p class="a">background: hsla(0, 100%, 50%, .1)</p>
   <p class="b">background: hsla(0, 100%, 50%, .4)</p>
   <p class="c">background: hsla(0, 100%, 50%, 1)</p>
   <p class="d">background: hsla(0, 100%, 30%, .8)</p>
   <p class="e">background: hsla(0, 100%, 70%, .4)</p>
   <p class="f">background: hsla(120, 100%, 50%, .64)</p>
   <p class="g">background: hsla(240, 100%, 50%, 1)</p>
   <p class="h">background: hsla(240, 0%, 50%, .6)</p>
   
</body>
</html>

Output

background: hsla(0, 100%, 50%, .1)

background: hsla(0, 100%, 50%, .4)

background: hsla(0, 100%, 50%, 1)

background: hsla(0, 100%, 30%, .8)

background: hsla(0, 100%, 70%, .4)

background: hsla(120, 100%, 50%, .64)

background: hsla(240, 100%, 50%, 1)

background: hsla(240, 0%, 50%, .6)

CSS hsla() Function Syntax

The syntax of hsla() function in CSS, is:

hsla(hue, saturation, lightness, alpha)

The first three parameters works exactly same as in hsl() function. Whereas the last parameter, that is alpha, defines the opacity of color using a number ranges from 0.0 to 1.0. The 0.0 is used to create fully transparent color, whereas 1.0 to create fully opaque color.

CSS Online Test

« Previous Tutorial Next Tutorial »