HSL represents hue, saturation, and lightness.
HSLA color values add an Alpha channel in HSL values to define opacity.
HSL Color Values
In HTML, a color can be defined using hue, saturation, and lightness (HSL) with the format:
hsl(hue, saturation, lightness)Hue ranges from 0 to 360 degrees. At 0 degrees, it represents red; at 120 degrees, it signifies green, and at 240 degrees, it denotes blue.
Saturation is expressed as a percentage, where 0% indicates a shade of gray, 50% indicates half of the color's saturation, with a visible but diminished intensity, and 100% represents the full color intensity.
Lightness is also represented as a percentage, where 0% means no lightness (appears as black), 50% means balanced lightness (neither dark nor light), and 100% indicates maximum lightness, which appears as white.
Some HSL examples
HSLA Color Values
In HTML, a color can be defined using hue, saturation, lightness and alpha channel (HSLA) with the format:
hsla(hue, saturation, lightness, alpha)The alpha parameter ranges from 0.0 (completely transparent) to 1.0 (fully opaque):
For example, in case of HSLA, the above colors will appear as:
Please check below options for the links to our previous or next tutorial.