RGB and HSL have a flaw most people never notice until it bites them: their numbers do not match human vision. A gradient that is mathematically even in RGB can look lumpy, passing through a dull grey or bunching colours together. A “50% lightness” yellow looks far brighter than a 50% blue. The perceptual colour models — LAB, LCH, OKLab and OKLCH — exist to fix this, and they are quietly behind better gradients, more even palettes, and reliable accessibility.
Convert any colour into these spaces with the RGB → OKLCH and RGB → LAB converters as you read.
The problem: equal numbers, unequal looks
In a well-designed colour space, the same numeric change should produce the same visual change. RGB and HSL fail this badly:
- In HSL, lightness 50% looks vivid and bright for yellow but dim for blue — same number, very different perceived brightness.
- In RGB, blending from one colour to another in a straight line often dips through a muddy grey, because the channels cross over unevenly.
This is not a rounding issue — it is baked into how those spaces are built. They were designed around how screens emit light (RGB) or around an intuitive control panel (HSL), not around how eyes perceive colour.
What “perceptually uniform” fixes
A perceptually uniform space is engineered so that geometric distance matches perceived difference. Moving lightness 40→50 looks like the same step as 70→80, and that consistency holds across every hue. Once that is true, several hard problems become easy:
| Task | Why uniformity helps |
|---|---|
| Smooth gradients | Even steps look even — no grey dead-zone or banding |
| Colour palettes / scales | Swatches are visually equidistant, not bunched |
| Accessibility / contrast | Lightness is a true measure of perceived brightness |
| “Same colour, different shade” | Adjusting lightness keeps the hue genuinely constant |
LAB and LCH: the originals
LAB (formally CIELAB) describes a colour with three axes: L for lightness (0 black to 100 white), a for green–red, and b for blue–yellow. It was the first widely used perceptual model and is the reference for measuring colour differences in industry. LCH is simply LAB expressed in the more intuitive cylindrical form — Lightness, Chroma (vividness), and Hue (angle) — so it reads much like HSL but is perceptually grounded.
OKLab and OKLCH: the modern fix
LAB had known weaknesses — most famously, changing the lightness of a blue made it drift toward purple. In 2020 OKLab (and its cylindrical form OKLCH) reworked the maths to remove those artefacts while keeping the same friendly layout: Lightness, Chroma, Hue. OKLCH is now part of CSS precisely because it gives designers perceptually even colour with hue-chroma-lightness controls that feel like HSL but actually behave.
oklch(75% 0.15 152) — 75% perceived lightness, moderate chroma, hue 152°. Build a colour scale by holding chroma and hue and stepping lightness, and every step looks evenly spaced — something neither RGB nor HSL can promise.Perceptual colour and accessibility
Web accessibility hinges on contrast — the difference in apparent brightness between text and its background. Because RGB numbers do not track perceived brightness, you cannot eyeball contrast from hex codes. Perceptual lightness can, which is why modern contrast tools lean on it. The Contrast Checker uses this to tell you whether a text/background pair actually meets accessibility targets, and OKLCH lightness lets you build entire colour systems that pass by construction.
When to reach for perceptual colour
- Gradients — interpolate in OKLCH for smooth, even transitions.
- Design systems & palettes — generate scales with even perceived steps.
- Accessibility — reason about contrast with real lightness.
- Colour matching / measurement — LAB for industry-standard difference (ΔE).
You will still store colours as hex and tweak them in HSL — perceptual spaces are the specialist tool you switch to for gradients, palettes and accessibility. The colour converters move any colour into OKLCH, LAB, LCH and back instantly and locally. For how all the models fit together, start at Color Spaces Explained.
Frequently asked questions
What does "perceptually uniform" mean?
It means equal numeric changes look like equal visual changes. In a perceptually uniform space, moving lightness from 40 to 50 looks like the same amount of change as 70 to 80, and that holds across every hue. RGB and HSL are not uniform — the same numeric step looks bigger in some colours than others.
What is the difference between LAB and OKLCH?
LAB (and its cylindrical form LCH) was the original perceptual model. OKLab/OKLCH are a 2020 redesign that fixes LAB's weaknesses — particularly that blue hues used to shift toward purple when you changed lightness. OKLCH keeps the intuitive hue-chroma-lightness layout and is now built into CSS.
Why use OKLCH for gradients?
Because it is perceptually uniform, a gradient interpolated in OKLCH changes smoothly and evenly, with no muddy grey middle or bunched-up bands. The same gradient done in RGB often passes through a dull grey or shifts hue unexpectedly.
How does perceptual colour help accessibility?
Accessibility is about contrast, which depends on how light colours actually appear — not their RGB numbers. Perceptual lightness gives a reliable measure of "how bright does this look", so you can build text/background pairs and colour scales that genuinely meet contrast targets.