Blog · Color Science

Perceptually Uniform Color Spaces

Why CIELAB, OKLab and CAM16 exist, what problems they solve, and how modern design tools use them.

Published November 15, 2026 · 8 min read

The Problem With RGB and HSL

RGB and HSL are convenient for screens but they do not match how the human eye perceives color. Specifically:

Equal numerical steps do not equal perceived steps: in RGB, moving from (0,0,0) to (10,10,10) produces a barely perceptible change, but moving from (245,245,245) to (255,255,255) produces a huge perceived change. The eye is far more sensitive to differences in dark tones than bright ones.
HSL lightness is not perceptual: HSL hue 60° (yellow) at L=50% looks far brighter than HSL hue 240° (blue) at L=50%, because yellow evokes more luminance response in the eye.
Interpolating in RGB gives muddy results: a gradient from blue to yellow passing through RGB midpoint produces a dull gray, not a smooth transition.

Perceptually uniform color spaces solve these problems. In a perceptually uniform space, equal numerical steps correspond to equal perceived differences.

What "Perceptually Uniform" Means

A color space is perceptually uniform if the numerical distance between any two colors correlates consistently with the human perception of their difference. Mathematically: if color A and color B are distance d apart, and color C and color D are also distance d apart, the viewer should perceive A-B and C-D as equally different.

No color space is perfectly uniform — human vision is too complex to model exactly. But some spaces (CIELAB, OKLab) are much more uniform than RGB or HSL.

CIELAB (1976)

CIELAB was developed by the International Commission on Illumination (CIE) in 1976 as an attempt to create a perceptually uniform space. It remains the industry standard for color difference measurement (Delta E).

CIELAB represents color in three dimensions:

L*: lightness from 0 (black) to 100 (white)
a*: green (negative) to red (positive)
b*: blue (negative) to yellow (positive)

The conversion from sRGB to CIELAB requires two steps: RGB → XYZ (the CIE 1931 tristimulus space) → Lab. Both steps involve non-linear transformations and the reference white point (typically D65).

CIELAB's strengths:

Widely supported in every color library
The basis for the standard Delta E color difference metrics
Well-documented and mathematically clean

CIELAB's weaknesses:

Not truly uniform in the blue-purple region (blues look too similar)
Requires a reference white point — results differ under different illuminants
Computation is more complex than RGB

OKLab (2020)

OKLab was introduced by Björn Ottosson in 2020 as a modern alternative to CIELAB. It was designed specifically for digital design workflows, where operations like gradient interpolation and color difference need to produce intuitively uniform results.

OKLab represents color in three dimensions:

L: perceived lightness from 0 to 1
a: green-red axis
b: blue-yellow axis

Key advantages of OKLab:

Better uniformity in the blue-purple region — the exact problem CIELAB struggles with
Simpler math — a direct sRGB to OKLab transform without a separate XYZ step
Designed for CSS — the oklch() function is now supported in modern browsers
Predictable gradient interpolation — OKLab gradients do not have the muddy midpoint problem of RGB

OKLab has become the default choice for modern design tools — including OmniColor's gradient generators when they use perceptual interpolation.

OKLCH

OKLCH is the cylindrical (hue-based) version of OKLab. It represents color as:

L: lightness
C: chroma (saturation-like)
H: hue angle

This is the perceptually-uniform equivalent of HSL. Designers find OKLCH more intuitive than OKLab for palette generation and theming, because the three dimensions map cleanly to what users adjust when they say "make it lighter" (L), "make it more vivid" (C), or "shift the color" (H).

CSS supports OKLCH directly: color: oklch(60% 0.15 240);

CAM16

CAM16 (Color Appearance Model 2016) is a comprehensive color appearance model that accounts for viewing conditions — the surrounding colors, the illuminant, the background luminance and other factors that affect how we perceive color.

CAM16 is more accurate than CIELAB or OKLab for predicting how colors actually look in context. But it is significantly more complex to implement and requires information that most digital design workflows do not have (ambient lighting, surrounding colors).

CAM16 is rarely used in design tools but is standard in color science research and professional color management.

Practical Applications

Gradient Interpolation

Interpolating a gradient in RGB produces muddy midpoints (e.g., blue to yellow produces gray in the middle). Interpolating in OKLab or CIELAB produces smooth, vibrant transitions that match designer intuition. Modern CSS gradient functions (like linear-gradient(in oklab, ...)) allow you to choose the interpolation space.

Color Difference (Delta E)

Delta E is computed in CIELAB or OKLab space. Delta E below 1 is imperceptible; above 10 is clearly different. This is the standard metric for verifying brand color fidelity and matching printed materials.

Palette Generation

Palette generators that work in OKLCH produce more balanced palettes than RGB-based generators because lightness steps in OKLCH correspond to perceived lightness steps. This means a "50-900 scale" built in OKLCH looks visually even — no tones appear too similar or too different.

Accessibility

WCAG contrast uses relative luminance, which is a perceptual measure derived from sRGB. Newer proposals (like APCA — Advanced Perceptual Contrast Algorithm) use more sophisticated perceptual modeling based on modern color spaces.

Which Color Space Should You Use?

Storage and transmission: sRGB (standard for web)
CSS output: HEX, RGB, HSL or OKLCH
Gradient interpolation: OKLab
Palette generation: OKLCH
Color difference: CIELAB (standard) or OKLab (modern)
Color science research: CIELAB or CAM16