CSS3/Color/HSLA

• Color
  • <color> Values
    • Basic color keywords
    • RGB
    • RGBA
    • transparent
    • HSL
    • HSLA
    • Extended color keywords
    • currentColor

HSLA(Hue-Saturation-Lightness-Alpha)

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.

Example

Alpha	hsla(H,S,L,A)	Color
0.0	hsla(0, 100%, 50%, 0.0)		fully transparent
0.2	hsla(0, 100%, 50%, 0.2)
0.4	hsla(0, 100%, 50%, 0.4)
0.6	hsla(0, 100%, 50%, 0.6)
0.8	hsla(0, 100%, 50%, 0.8)
1.0	hsla(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.