Hue, Saturation, and Lightness Explained (HSL, Simply)
If you've ever fiddled with a color picker and felt lost, the HSL model is the cure. It describes color the way people actually think about it — what color, how vivid, how bright — using three numbers: hue, saturation, and lightness.
Hue: which color
Hue is an angle on a color wheel, from 0 to 360 degrees. Red sits at 0°, green near 120°, blue near 240°, and you loop back to red at 360°. Change only the hue and you swing through the rainbow while keeping the same vividness and brightness.
Saturation: how vivid
Saturation is a percentage from 0% to 100%. At 100% the color is fully vivid; at 0% it's completely gray, with no color left at all. Lowering saturation is like draining the color out toward grayscale.
Lightness: how bright
Lightness also runs 0% to 100%. At 0% you get black, at 100% pure white, and 50% is the "full" version of the color. This is the dial that makes a color a tint (lighter) or a shade (darker) of itself.
Why HSL is so handy
Because the three controls are independent, HSL makes common design moves trivial. Want a darker version of a button color? Drop the lightness, leave hue and saturation alone. Want a muted palette? Lower saturation across the board. In RGB those same changes mean juggling three numbers at once with no intuitive meaning. In CSS you can write it directly:
/* same hue + saturation, three lightness steps */
--c-light: hsl(255 70% 66%);
--c-base: hsl(255 70% 52%);
--c-dark: hsl(255 70% 38%);HSL and the limits of perception
Here's the catch: equal steps in lightness don't always look equally different to your eye. Human vision is more sensitive to brightness changes in some ranges than others, and surrounding colors shift the effect too. That's the whole premise of Spot the Color, which moves just the lightness of one tile by a tiny amount — and of how the game generates those off-shade tiles.
Want to feel how few lightness points separate "obvious" from "invisible"? Play a few rounds and watch the gap shrink.