#2563eb, rgb(37 99 235), and hsl(221 83% 53%) can name the same colour. The useful question is which representation makes the next design change least error-prone.
Short answer: use modern space-separated rgb() where you manipulate channels, HSL for quick hue adjustments, and OKLCH for perceptual palettes and lightness scales. Hex remains fine for stable literals; it is not a design system.
| Format | Reach for it when |
|---|---|
| Hex | A compact fixed token is enough |
| RGB | Mixing or alpha/channel values matter |
| HSL | You want an intuitive hue/saturation/lightness knob |
| OKLCH | Building consistent ramps across hues |
:root {
--brand: oklch(0.62 0.19 255);
--brand-muted: oklch(0.82 0.08 255);
}
Equal HSL lightness does not reliably look equally bright across hues. OKLCH's lightness axis is designed to be more perceptually uniform, though out-of-gamut colours still need testing in the target browser space.
Use a color converter to inspect equivalent values, but check contrast with real foreground/background pairs. A prettier palette is not accessible if its text disappears.
Cover photo by Karolina Grabowska on Pexels.