Styla sayshsl() describes color as hue, saturation, lightness — the most human-friendly format — and oklch() is the modern upgrade.
hsl(258 100% 76%) reads as a hue angle (0-360), saturation %, and lightness %. Rotating the hue or nudging lightness is intuitive — great for palettes and hover states. oklch() is a newer perceptually-uniform space that keeps brightness consistent across hues.
Power-ups you unlock
hsl(hue sat% light%) — tweak by hand easily
Adjust lightness for hover/active variants
hsla / slash form adds alpha
oklch() is perceptually uniform (modern)
The Specificity Sphinx attacks — common mistakes
Forgetting the % on saturation/lightness
Assuming equal HSL lightness looks equally bright (it does not)
Skipping oklch where consistent brightness matters
Boss battleBuild three shades of one hue by changing only the lightness in hsl().