HSL

HSL stands for Hue, Saturation, and Lightness.
It is a color model that is used to describe the color of a light source. It was developed to more closely align with the way human vision perceives color-making attributes.
It is defined by hsl(hue, saturation, lightness) where hue is the color, saturation is the amount of color, and lightness is the amount of light.

Hue

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

Saturation

Saturation is a percentage of the color's saturation.
0% means a shade of gray and 100% is the full color.

Lightness

Lightness is a percentage of the color's lightness.
0% means black and 100% is white.

We can add one more channel to the HSL color model.
i.e. the alpha channel.
and the color model is defined by hsla( hue, saturation, lightness, alpha ).
Where alpha is a number between ( 0 - 1 ) which is the information about transparency of the color.
1 is opaque and 0 is completely transparent. By default alpha is 1.

Syntax

                
    hsl( hue, saturation, lightness )              // for example : hsl( 128, 100%, 50% )
    hsl( hue, saturation, lightness, alpha )       // for example : hsl( 128, 100%, 60%, 0.5)
    hsla( hue, saturation, lightness, alpha )      // for example : hsla( 128, 100%, 60%, 0.5)