Why do we have multiple color models?
At a high level, there are three reasons:
1. Hardware vs. human thinking
- Displays think in RGB (how much red, green, blue light).
- Designers think in hues, lightness and contrast. RGB is bad at that.
2. Math vs. perception
- Many operations (like gradients, mixing colors, or generating steps in a palette) are easier in a space that's closer to how we see color.
- That's where models like LAB, LCH and OKLCH come in.
3. Specific workflows
- UI design, photo editing, and printing all have slightly different needs, so different models evolved around them.
In practice
- Store and ship colors in RGB/hex (because browsers and CSS expect that).
- Design and manipulate colors in HSL, LAB/LCH or OKLCH for better control.
RGB — the device model
RGB describes color as three numbers: red, green and blue light, usually in a 0–255 range or 0–1.
Good for
- Talking directly to screens and CSS: #rrggbb, rgb(), rgba().
- Storing color values (tokens, variables).
- Interoperability — everything supports RGB.
Weak for
- Adjusting lightness or saturation in a predictable way.
- Building evenly spaced palettes or nice gradients.
- Thinking in terms designers like ("slightly lighter, less saturated blue").
HSL — Hue, Saturation, Lightness
HSL rewrites RGB in more human‑friendly terms:
Hue (H)
- Which color on the color wheel (0–360°, red at 0°, green at 120°, blue at 240°, etc.).
Saturation (S)
- Intensity of the color, from gray (0%) to full color (100%).
Lightness (L)
- Perceived light/dark, from black (0%) through mid tones (50%) to white (100%).
Good for
- Designing palettes with clear steps — keep hue fixed and change lightness to get 50, 100, …, 900.
- Making simple adjustments: "Make this button a bit lighter" → increase L.
- Teaching basic digital color theory — hue, saturation, lightness are intuitive.
Weak for
- Not truly perceptually uniform: the same L value doesn't always look equally bright for different hues.
- Some gradients in HSL can look uneven or "muddy".
HSB / HSV — Hue, Saturation, Brightness/Value
HSB (or HSV — they're essentially the same) is another way of mapping RGB to hue/saturation plus a brightness axis. You mostly encounter HSB/HSV in design tools (Figma, Sketch, Photoshop color pickers), not in CSS directly.
Hue (H)
- Same idea as HSL.
Saturation (S)
- How far from gray.
Brightness/Value (B/V)
- Maximum channel value in RGB.
Good for
- Intuitive color pickers where you drag a 2D field and a vertical slider.
- Roughly thinking in "brightness" rather than strict lightness.
Weak for
- Not perceptually uniform — same issue as HSL.
- Brightness/value doesn't line up perfectly with how we experience lightness.
LAB — a step toward perceptual uniformity
CIE LAB is a color space designed so that numerical differences correspond more closely to perceived differences. A change of "10 units" in Lab should feel similar in strength across the space — not perfect, but much better than RGB or HSL.
L
- Lightness (0–100).
a
- Green ↔ red axis.
b
- Blue ↔ yellow axis.
Good for
- Color-difference calculations (ΔE) — how far apart are two colors?
- Creating more even gradients and tints than RGB/HSL.
- Advanced tasks: color matching, tone-mapping, etc.
Weak for
- Values are less intuitive (L: 52, a: -4, b: 18 doesn't tell you much at a glance).
- Historically a bit clunky for web use — though modern CSS is changing this.
OKLCH — modern, perceptual and UI-friendly
OKLCH is a newer color model designed specifically to be perceptually uniform and well‑behaved on screens. It's built on top of OKLab, and its key advantage is that equal steps in L actually look like equal jumps in lightness.
L
- Lightness (0–1).
C
- Chroma — how colorful vs. gray.
H
- Hue angle, like HSL.
Key advantages
- Equal steps in L look like equal jumps in lightness.
- You can vary chroma without destroying lightness — great for accessible palettes.
- Plays nicely with wide-gamut colors (P3 and beyond).
- Supported in modern CSS via
oklch(L C H).
Good for
- Building accessible, scalable palettes where each step is predictable.
- Designing gradients that don't go muddy.
- Working in modern design systems — Tailwind and others are moving this direction.
Weak for
- Still relatively new; not all teams or tools are familiar with it.
- Values can be unfamiliar at first glance.
When to use which model (cheat sheet)
A practical summary for UI work:
Use for: Final storage, CSS, design tokens, Tailwind configs.
Think of it as the transport format.
Use for: Hand-tweaking colors, creating simple scales (50–900), teaching color concepts.
Great as a learning and quick-adjustment tool.
Use for: When you work inside tools that expose HSB (Figma, Sketch, Photoshop).
Useful for parity between ColorR and your design tool's picker.
Use for: Color distance and matching, more even gradients than RGB.
More relevant behind the scenes or for color-savvy users.
Use for: Serious design systems, predictable lightness steps, accessible palettes, wide-gamut CSS.
Ideal as the modern default for color construction.