HSL stands for hue, saturation, and lightness. HSLA color values are an extension of HSL with an Alpha channel (opacity).
HSL Color Values
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage value, 0% is black, and 100% is white.
Saturation
Saturation can be described as the intensity of a color. 100% is pure color, no shades of gray 50% is 50% gray, but you can still see the color. 0% is completely gray, you can no longer see the color. hsl(0, 100%, 50%)
Lightness
The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white). hsl(0, 100%, 0%)
Shades of Gray
Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades: hsl(0, 0%, 20%)
HSLA Color Values
HSLA color values are an extension of HSL color values with an Alpha channel – which specifies the opacity for a color.
An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all): hsla(0, 100%, 50%, 0.5)