Designers who pick colors from a wheel build inconsistent palettes. Designers who derive colors in HSL — rotate hue, hold saturation, target lightness — build systems that scale. The coordinate system is the method.
The three dials
- Hue (0–360°): position on the color wheel — 0 red, 120 green, 240 blue. The identity of the color.
- Saturation (0–100%): gray↔vivid. The intensity dial — palette consistency lives here.
- Lightness (0–100%): black↔white through the color. The contrast dial — accessibility lives here.
The palette recipes
| Relationship | Hue move | Use |
|---|---|---|
| Monochromatic | same hue, S/L variations | Safest — the gray-on-color dashboard look |
| Analogous | ±30° | Harmonious, low-tension palettes |
| Complementary | +180° | Maximum tension — CTAs and accents |
| Triadic | ±120° | Vibrant balanced trios (primary/secondary/accent) |
The contrast trick
- Pick your brand hue (H), saturation (S), and mid lightness (50%) — the vivid identity color.
- Build the scale in lightness: 90/80/60/40/20% of the same hue — Tailwind-style ramps fall out for free.
- Check luminance at each step (the converter prints it) — lightness and luminance correlate but not linearly (yellow outruns blue at equal lightness).
- Pair scale ends for text: L90 on L20 passes contrast at any hue; L50 on L50 fails at every hue.
The yellow trap
Yellow's high inherent luminance means "same 50% lightness" is perceptually wrong across hues — yellow at L50 glows like blue at L30. Palette systems compensate (Tailwind's yellow-500 is lighter than its blue-500 by design). The luminance readout catches the drift; trust it over the lightness number when hues differ.
HSL turns color from taste into arithmetic — hue for identity, saturation for family, lightness for contrast. The wheel is still where the joy lives; the numbers are where the consistency does.