From W3C Wiki


Just as the ‘rgb()’ functional notation has the ‘rgba()’ alpha counterpart, the ‘hsl()’ functional notation has the ‘hsla()’ alpha counterpart.

The format of the HSL Value

  • hsla(H,S,L,A)
    The format of an HSLA color value in the functional notation is ‘hsla(’ followed by the hue in degrees, saturation and lightness as a percentage, and an <alphavalue>, followed by ‘)’. White space characters are allowed around the numerical values.


0.0hsla(0, 100%, 50%, 0.0) fully transparent
0.2hsla(0, 100%, 50%, 0.2)  
0.4hsla(0, 100%, 50%, 0.4)  
0.6hsla(0, 100%, 50%, 0.6)  
0.8hsla(0, 100%, 50%, 0.8)  
1.0hsla(0, 100%, 50%, 1.0) fully opaque

CSS Reference

The CSS Color Module Level 3 specification defines the HSLA color values in 4.2.5. HSLA color values.