HSL
Hue, saturation, and lightness make up the acronym HSL.
HSL Color Values
Hue, saturation, and lightness (HSL) specifications for colors in CSS can take the following form:
hsl (hue, saturation, lightness)
On the color wheel, hue ranges from 0 to 360 degrees. Red is 0, green is 120, and blue is 240.
Saturation is expressed as a percentage. 100% represents the entire color, whereas 0% is a grayscale shade.
Lightness has a proportion as well. 50% are neither light nor dark, 100% are white, and 0% are black.
Play around with the HSL values shown below:
hsl(0, 100%, 50%)
HUE
SATURATION
LIGHTNESS
Example
Saturation
A color’s intensity can be defined as saturation.
100% is full color—there are no grayscales.
50% is gray, yet the hue is still discernible.
You can no longer discern the color at 0% since it is entirely gray.
Example
Lightness
A color’s brightness can be defined as the amount of light you wish to add to it; 0% represents no light at all (black), 50% represents half of the light (neither dark nor light), and 100% represents full lightness (white).
Example
Shades of Gray
In order to define shades of gray, one commonly sets the hue and saturation to 0, then modifies the brightness from 0% to 100% to obtain darker or lighter shades:
Example
HSLA Color Values
The alpha channel, which determines a color’s opacity, is added to HSL color values to create HSLA color values.
An HSLA color value is expressed as follows:
hue, saturation, lightness, and alpha (hsla).
A number between 0.0 (complete transparency) and 1.0 (complete transparency) is the alpha parameter:
Mix the following HSLA values to conduct an experiment:
hsla(0, 100%, 50%, 0.5)
HUE
SATURATION
LIGHTNESS
ALPHA
