CSS/Properties/color/HSLA
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
CSS Color defines the HSLA color values in 4.2.5. HSLA color values.