Colour Models

A colour model is a mathematical system for describing colour. The model you use doesn’t change the colour — a vivid red is the same vivid red in RGB, HSL, and OKLCH. What changes is how easy it is to reason about modifications. Choosing the right model for the task at hand is the difference between reaching for a specific shade with confidence and making ten trial-and-error adjustments.

RGB — how screens mix light

RGB describes colour as a mixture of red, green, and blue light, each on a 0–255 scale. rgb(255, 0, 0) is pure red; rgb(0, 0, 255) is pure blue; rgb(255, 255, 255) is white (all channels at maximum). This models how display screens physically work: they have red, green, and blue sub-pixels that mix at varying intensities.

RGB is useful when you know the exact colour you want and are working directly with hardware output. It’s less useful for design decisions like “make this 20% darker” or “shift this toward warm” — those adjustments require touching all three channels simultaneously in ways that aren’t intuitive. RGB is a great output format but a poor thinking format.

HSL — human-readable colour

HSL (Hue, Saturation, Lightness) maps more directly to how designers describe colour intuitively. “Make it more blue” = adjust hue. “Make it less vivid” = reduce saturation. “Make it lighter” = increase lightness. Each axis of change corresponds to a single number.

HSL is widely supported in CSS (hsl(210, 80%, 50%)) and is far more practical for creating colour palettes, adjusting hover states, and building systematic colour scales. Its main limitation is that equal lightness values across different hues don’t actually look equally bright to the human eye — a yellow at hsl(60, 80%, 50%) appears much brighter than a blue at hsl(240, 80%, 50%) even though both have the same lightness value.

OKLCH — perceptual accuracy

OKLCH (Lightness, Chroma, Hue in the OKLab perceptual colour space) solves the problem that HSL has: its lightness channel is perceptually uniform. When you set two colours to the same lightness in OKLCH, they actually appear equally bright. When you shift hue while holding lightness constant, the perceived brightness stays consistent.

This matters enormously for accessible colour and building palettes. In HSL, creating a palette with consistent perceived weight requires manual adjustment and visual calibration. In OKLCH, the math does that work. The CSS oklch() function has been supported in modern browsers since 2023, and tools like Tailwind CSS v4 use it internally for this reason.

Which to use in CSS

Use RGB when copying a colour value from a design tool or specification — it’s universal and unambiguous. Use HSL for defining and adjusting colours in code, especially when building systematic colour scales with CSS custom properties. Use OKLCH when perceptual consistency matters — for large palettes, accessible contrast, and dark mode adaptations.

In practice: start with HSL for its readability, migrate to OKLCH when you need precise perceptual control. A growing number of design systems are shifting entirely to OKLCH as browser support has stabilised. The model is a tool — choose whichever makes the current task clearest to reason about.