Compare ΔE₀₀ uniformity across all 6 interpolation spaces × 4 easing modes (24 combinations). Lower standard deviation = smoother gradient.
| Space | Easing | Mean ΔE | Min ΔE | Max ΔE | Std Dev | Uniform |
|---|---|---|---|---|---|---|
| Click Run Batch to analyse all space × easing combinations. | ||||||
CSS Color Level 4 — Color Interpolation
W3C CSS Color Level 4 — Defines color interpolation in any rectangular
or polar color space. Introduces color-mix() and
color-interpolation-method for gradients. Supports sRGB,
sRGB-linear, lab, oklab, oklch, hsl, hwb, xyz, xyz-d50, xyz-d65. Hue interpolation
methods:
shorter, longer,
increasing, decreasing.
CSS Images Level 3 & 4 — Gradients
W3C CSS Images Module — Specifies linear-gradient(),
radial-gradient(), conic-gradient(),
and repeating variants. Level 4 adds interpolation color space parameter:
linear-gradient(in oklch, red, blue). Colour stop positions
accept lengths and percentages with automatic even distribution.
OKLab & OKLCH — Perceptual Uniformity
Björn Ottosson (2020) — OKLab is a perceptual color space designed for image processing and gradient generation. It addresses CIELab’s blue-purple hue non-linearity. OKLCH (polar form) enables hue-preserving interpolation. Adopted by CSS Color Level 4 as the recommended perceptual interpolation space. Lightness is highly uniform; chroma is decorrelated from hue.
sRGB — IEC 61966-2-1:1999
Standard default colour space for the Web. Gradients interpolated in sRGB operate on gamma-encoded values — fast but perceptually non-uniform (middle greys appear darker). Linear-light sRGB (sRGB-linear) removes this distortion by interpolating in the linearised domain, then re-encoding.
HSL — Hue Saturation Lightness
Joblove & Greenberg (1978) — Cylindrical-coordinate representation of sRGB. Hue interpolation produces rainbow-like gradients. Short-arc traverses the minor arc (≤180°); long-arc takes the complementary path (>180°). HSL lightness is not perceptually uniform — OKLCH should be preferred for even luminance distribution.
CIEDE2000 — Color Difference Standard
Sharma, Wu & Dalal (2005) — The standard metric for evaluating perceptual color difference. ΔE₀₀ < 1 is imperceptible, 1–3 barely noticeable, >6 significant. Used here to quantify inter-step uniformity: a gradient with low ΔE standard deviation is perceptually smooth.
WCAG 2.2 — Contrast Requirements
W3C WCAG 2.2 — Normal text requires 4.5:1 contrast ratio (AA) or 7:1 (AAA). Large text (≥18pt or 14pt bold) requires 3:1 (AA-lg). The contrast grid in this lab checks every palette pair against these thresholds, helping designers select accessible foreground/background combinations from their gradient palette.
APCA — Advanced Perceptual Contrast Algorithm
Somers (WCAG 3.0 draft) — Next-generation contrast metric replacing WCAG 2.x luminance ratio. APCA accounts for polarity (dark-on-light vs light-on-dark), spatial frequency, and display adaptation. Returns a Lightness Contrast (Lc) value. |Lc| ≥ 60 is readable for body text, ≥ 45 for large text.
sRGB Transfer Function
C_sRGB = 12.92 × C_lin if C_lin ≤ 0.0031308
C_sRGB = 1.055 × C_lin^(1/2.4) − 0.055
Decode (sRGB → linear):
C_lin = C_sRGB / 12.92 if C_sRGB ≤ 0.04045
C_lin = ((C_sRGB + 0.055) / 1.055)^2.4
Linear RGB Interpolation
2. lerp(A_lin, B_lin, t) for each channel
3. Encode linear → sRGB
Avoids the mid-tone darkening of naive sRGB interpolation.
OKLab from Linear RGB
l = 0.4122214708·R + 0.5363325363·G + 0.0514459929·B
m = 0.2119034982·R + 0.6806995451·G + 0.1073969566·B
s = 0.0883024619·R + 0.2817188376·G + 0.6299787005·B
LMS → OKLab (cube root + rotation):
l' = cbrt(l), m' = cbrt(m), s' = cbrt(s)
L = 0.2104542553·l' + 0.7936177850·m' − 0.0040720468·s'
a = 1.9779984951·l' − 2.4285922050·m' + 0.4505937099·s'
b = 0.0259040371·l' + 0.7827717662·m' − 0.8086757660·s'
OKLCH from OKLab
H = atan2(b, a) × 180 / π (mod 360)
Inverse:
a = C × cos(H × π / 180)
b = C × sin(H × π / 180)
OKLCH Hue Interpolation
ΔH = ((H_end − H_start + 540) mod 360) − 180
H(t) = H_start + ΔH × t
Long arc (CSS "longer" hue):
ΔH = H_end − H_start
if |ΔH| ≤ 180: ΔH = ΔH > 0 ? ΔH − 360 : ΔH + 360
H(t) = H_start + ΔH × t
OKLCH Gamut Mapping (Binary Search)
lo = 0, hi = C
for 20 iterations:
mid = (lo + hi) / 2
convert OKLCH(L, mid, H) → OKLab → linear RGB → sRGB
if all channels ∈ [0, 1]: lo = mid (in gamut)
else: hi = mid (out of gamut)
Returns the highest-chroma in-gamut sRGB colour preserving L and H.
HSL Interpolation (Short & Long Arc)
ΔH = ((H_b − H_a + 540) mod 360) − 180
H(t) = H_a + ΔH × t
S(t) = lerp(S_a, S_b, t)
L(t) = lerp(L_a, L_b, t)
HSL long arc:
ΔH = H_b − H_a
if |ΔH| ≤ 180: flip sign & add/subtract 360
Produces the rainbow-through path around the hue wheel.
Easing Functions
ease-in: t' = t²
ease-out: t' = 1 − (1 − t)²
ease-in-out: t' = t < 0.5 ? 2t² : 1 − (−2t+2)²/2
step(8): t' = round(t × 8) / 8
CIEDE2000 (ΔE₀₀)
(ΔL'/S_L)² + (ΔC'/S_C)² + (ΔH'/S_H)²
+ R_T × (ΔC'/S_C) × (ΔH'/S_H)
]
S_L = 1 + 0.015(L̄'−50)² / sqrt(20+(L̄'−50)²)
S_C = 1 + 0.045 C̄'
S_H = 1 + 0.015 C̄' T
R_T corrects chroma/hue interaction in the blue region.
WCAG 2.x Contrast Ratio
CR = (L_lighter + 0.05) / (L_darker + 0.05)
AA normal text: CR ≥ 4.5:1
AA large text: CR ≥ 3:1
AAA normal text: CR ≥ 7:1
Color Spaces & Interpolation
[2] W3C CSS Color Level 4 (2024) — Color interpolation, color-mix(), oklch gradient support. w3.org/TR/css-color-4/
[3] W3C CSS Images Level 4 (2023) — Gradient functions with color space parameter. w3.org/TR/css-images-4/
[4] IEC 61966-2-1:1999 — Default RGB colour space (sRGB).
Perceptual Color Difference
[6] CIE 15:2004 — Colorimetry (3rd Edition).
[7] ISO/CIE 11664-6:2014 — CIEDE2000 Colour-Difference Formula.
Accessibility & Contrast
[9] Somers, A. — APCA: Advanced Perceptual Contrast Algorithm. WCAG 3.0 draft contrast method.
[10] Brettel, H., Viénot, F. & Mollon, J.D. (1997) — Computerized simulation of color appearance for dichromats. JOSA A, 14(10), 2647-2655.
Color Science & Perception
[12] Poynton, C.A. (2012) — Digital Video and HD: Algorithms and Interfaces (2nd ed.).
[13] Lindbloom, B. — brucelindbloom.com — Colour mathematics and conversion matrices.
About this tool
This lab implements gradient interpolation in 6 color spaces (sRGB, Linear RGB, HSL short/long, OKLCH short/long) with 5 easing modes, CIEDE2000 uniformity analysis, 4 analysis charts, CVD simulation, WCAG contrast grids, tint/shade generation, OKLCH harmony palettes, batch analysis (24 combinations), and 25+ curated presets — entirely client-side (zero network). Not a substitute for calibrated measurement or professional color management software.
Why OKLCH for Gradients?
sRGB interpolation causes the infamous “desaturated middle” problem —
blending
complementary hues (e.g., blue → yellow) produces muddy greys in the centre. HSL
avoids
this by traversing the hue wheel, but its lightness axis is not perceptually uniform.
OKLCH solves both: hue interpolation is clean, lightness is uniform, and chroma is
decorrelated. CSS Color Level 4 now defaults to oklch for gradient
interpolation. Use OKLCH Short Hue for natural transitions and
OKLCH Long Hue for rainbow-like paths.
The Desaturated Middle Problem
When complementary colors (opposite on the hue wheel) are interpolated in sRGB, the
midpoint passes through achromatic grey because the RGB channels cancel. In Linear RGB
this effect is reduced but not eliminated. In OKLCH, the interpolation follows the
hue wheel and maintains chroma throughout, producing vivid midpoints. Compare
sRGB vs OKLCH Short on a red–cyan gradient to see the
difference clearly.
Gradient Banding & Step Count
8-bit displays can show visible bands when a gradient spans a narrow luminance range across many pixels. The ΔE₀₀ chart reveals banding risk: if adjacent steps have ΔE < 1, they are visually indistinguishable and the gradient appears smooth. If steps show large ΔE spikes, those transitions may appear as hard edges. Increasing step count or switching to OKLCH often resolves banding.
- Narrow luminance range (< 20 L* units): 8–16 steps
- Medium range (20–50 L*): 16–32 steps
- Full range (> 50 L*): 32–64 steps
- CSS engine handles sub-pixel interpolation natively
Gamut Mapping in Polar Spaces
When interpolating in OKLCH, intermediate colours may fall outside the sRGB gamut (chroma exceeds the sRGB boundary at that lightness and hue). This lab uses a binary search gamut mapper: given target (L, C, H), it finds the maximum in-gamut chroma by halving the chroma interval 20 times. This preserves hue and lightness while reducing chroma — visually preferable to hard clipping, which can shift hue.
Easing & Perceptual Distribution
Linear interpolation distributes color stops evenly in the chosen space. Ease-in concentrates more steps near the start color (gradual departure). Ease-out concentrates near the end. Ease-in-out creates a smooth S-curve. Step mode quantises into 8 discrete bands, useful for design-token generation or posterisation effects.
The ΔE chart shows how easing affects uniformity: linear in OKLCH tends to produce the most even ΔE values, while ease-in/out create deliberate non-uniformity that may be more visually pleasing depending on context.
Color Vision Deficiency Testing
The CVD simulation applies simplified Brettel dichromat matrices (protanopia, deuteranopia, tritanopia) to every palette step. If two adjacent steps become indistinguishable under a CVD type, the gradient loses information for that viewer. Best practice: ensure the gradient also varies in lightness (not just hue/chroma) so that CVD users still perceive a smooth transition.
Batch Analysis & Space Selection
The batch analysis compares all 24 space × easing combinations. A ☆ in the “Uniform” column indicates standard deviation < 0.5 ΔE₀₀, meaning the gradient steps are near-perceptually equal. For most gradients, OKLCH + linear produces the lowest standard deviation. HSL + step produces the highest (by design, as step mode intentionally quantises).