HSL
Write a blue HSL color and a paler background with the same hue.
Understand the topic
HSL represents hue, saturation, and lightness. Hue is an angle around a color wheel: red is near 0 degrees, green near 120, and blue near 240. Saturation describes color intensity and lightness describes the distance between black and white. HSL is useful when you want related colors with different lightness values.
Worked example
<p style="background: hsl(150 60% 92%); color: hsl(150 60% 22%);">A related color pair</p>Both colors use the same hue and saturation while lightness differs. This creates a related pair, but contrast should still be measured.
Practice
Write a blue HSL color and a paler background with the same hue.
Show a suggested answer
text: hsl(220 70% 30%)
background: hsl(220 70% 95%)Common mistake
Saturation and lightness require percentages. A lightness of 50% does not guarantee equal perceived brightness across hues.