Flash cards
Review the key moves
What is the main idea behind CSS HSL Colors?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Put the learning moves in the order that makes the concept easiest to apply.
HSL Value
HSL stands for hue, saturation, and lightness.
In CSS, 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 (or 360) is red 120 is green 240 is blue
- 0 (or 360) is red
- 120 is green
- 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; 0% is black, 50% is neither light or dark, 100% is white.
Experiment by mixing the HSL values below:
HUE
SATURATION
LIGHTNESS
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.
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) and 100% means full lightness (white).
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:
HSLA Value
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):
Experiment by mixing the HSLA values below:
HUE
SATURATION
LIGHTNESS
ALPHA