CSV includes all palette step values (hex, RGB, luminance, OKLab, Lab, gamut flags). JSON contains full gradient state. SVG outputs a 400×50 rectangle strip.
color-interpolation-in: oklab in CSS Color Level 4 compatible browsers.
CSS Gradients (CSS Images Level 3 / 4)
CSS gradients are defined by the CSS Images Module Level 3 (W3C Recommendation). Three
types are supported: linear-gradient(), radial-gradient(), and
conic-gradient(). Each accepts colour stops with optional position
percentages.
CSS Images Level 4 adds color-interpolation-method enabling
interpolation in OKLab, OKLCH, Lab, LCH, sRGB, and other spaces directly in CSS.
Colour Interpolation Spaces
sRGB: Standard component-wise interpolation. Fast but non-perceptual — produces grey dead zones between complementary colours.
Linear-light: Interpolation in linearised sRGB (physical light space). Avoids mid-range desaturation but can produce unexpected brightness shifts.
HSL: Interpolation along the hue circle (shortest arc). Preserves saturation but has non-uniform lightness.
OKLab: Perceptually uniform Cartesian space. Produces uniform transitions without grey zones or hue shifts. Recommended for most use cases.
OKLCH: Cylindrical form of OKLab (Lightness, Chroma, Hue). Enables hue-continuous interpolation with perceptual uniformity. Best for rainbow-type gradients.
Perceptual Uniformity & Grey Dead Zone
When complementary colours (e.g., blue and orange) are interpolated in sRGB, the midpoint passes through grey — the "grey dead zone." This occurs because sRGB is not perceptually uniform.
OKLab and OKLCH avoid this by maintaining consistent lightness and chroma throughout the transition. The ΔE step profile visually confirms uniformity: flat bars = perceptual smoothness.
Gamut Mapping in Gradients
When interpolating in OKLab/OKLCH, intermediate colours may fall outside the sRGB gamut. This tool clips out-of-gamut values to [0, 255]. Production workflows should use proper gamut mapping (e.g., OKLCH chroma reduction) for perceptually accurate results.
The gamut comparison bars show what percentage of gradient samples fall within sRGB, Display P3, and Rec. 2020 boundaries.
WCAG 2.x Contrast on Gradients
WCAG 2.1 Success Criterion 1.4.3 requires 4.5:1 contrast for normal text and 3:1 for large text. On gradient backgrounds, contrast varies along the gradient — the midpoint luminance provides a practical approximation for text overlay decisions.
This tool reports midpoint luminance and contrast ratios against white (#FFF) and black (#000) text.
CSS Color Level 4 & 5
CSS Color Level 4 introduces oklab(), oklch(),
lab(), lch(), and color(display-p3 ...). Level 4
gradients can specify interpolation space:
linear-gradient(in oklab, #f00, #00f).
Level 5 adds relative colour syntax, color-mix() in any space,
and colour contrast functions.
Colour Interpolation
Linear-light mix:
Decode each channel to linear: Clin = srgb_to_linear(C/255)
Mix: M(t) = (1-t)·Alin + t·Blin
Encode: C(t) = 255 · linear_to_srgb(M(t))
HSL mix (shortest arc):
Δh = ((hB − hA + 540) mod 360) − 180
h(t) = hA + Δh · t, s(t) = lerp, l(t) = lerp
OKLab mix: Linear in (L, a, b) Cartesian space
OKLCH mix: Linear in (L, C, h) with shortest hue arc
OKLab / OKLCH (Ottosson 2020)
| 0.4122214708 0.5363325363 0.0514459929 |
| 0.2119034982 0.6806995451 0.1073969566 |
| 0.0883024619 0.2817188376 0.6299787005 |
Step 2: l′=∛l, m′=∛m, s′=∛s
Step 3: LMS′ → OKLab (M2):
| 0.2104542553 0.7936177850 −0.0040720468 |
| 1.9779984951 −2.4285922050 0.4505937099 |
| 0.0259040371 0.7827717662 −0.8086757660 |
OKLCH: C = √(a² + b²), h = atan2(b, a)
Relative Luminance (WCAG 2.x)
Contrast ratio: CR = (Llighter + 0.05) / (Ldarker + 0.05)
Where Rlin = srgb_to_linear(R/255), etc.
Colour Difference Metrics (ΔE)
CIEDE2000: Full formula with G, SL, SC, SH, T, RT.
ΔE00 <1 imperceptible, 1-2 expert, 2-5 noticeable, >10 very large.
ΔEOK: √[(ΔL)² + (Δa)² + (Δb)²] in OKLab
Easing Functions
Ease-in: f(t) = t²
Ease-out: f(t) = t(2 − t)
Ease-in-out: f(t) = t < 0.5 ? 2t² : −1 + (4 − 2t)t
Applied to the palette step parameter t before sampling.
CSS Gradient Syntax
Radial: radial-gradient(shape at position, ...)
Conic: conic-gradient(from angle at x y, ...)
Repeating: repeating-linear-gradient(...)
Level 4 with interpolation:
linear-gradient(in oklab, #f00, #00f)
linear-gradient(in oklch longer hue, #f00, #00f)
CSS Gradient Standards
[2] W3C CSS Images Module Level 4 — Adds color-interpolation-method, enabling OKLab/OKLCH interpolation in CSS.
[3] W3C CSS Color Level 4 — oklab(), oklch(), lab(), lch(), color(display-p3 ...), color-mix().
[4] W3C CSS Color Level 5 — Relative colour syntax, contrast functions.
OKLab / OKLCH
[6] Ottosson, B. (2021) — OKLab: a new perceptual color space. Widely adopted in CSS Color Level 4.
Colour Difference
[8] CIE 142:2001 — Improvement to industrial colour-difference evaluation.
Perceptual Uniformity & Colorimetry
[10] Lindbloom, B. — brucelindbloom.com — Comprehensive colour mathematics and matrices.
[11] Fairchild, M.D. (2013) — Color Appearance Models (3rd ed.). Wiley.
[12] Poynton, C.A. (2012) — Digital Video and HD: Algorithms and Interfaces (2nd ed.).
WCAG & Accessibility
[14] W3C WCAG 2.2 — Latest accessibility contrast requirements.
About this tool
Gradient Lab implements 5 interpolation spaces (sRGB, linear-light, HSL, OKLab, OKLCH), CIE 1931 chromaticity path, luminance profiling, ΔE76/ΔE00/ΔEOK step analysis, gamut comparison (sRGB/P3/Rec.2020), stepped palette generation, batch analysis, and bootstrap CI — entirely client-side (zero network). Not a substitute for calibrated ICC profile workflows.
Enter one gradient per line as space-separated HEX stops
(e.g. #f00 #00f). Results show ΔE, luminance range, and gamut coverage.
Bootstrap resampling of ΔE00 along the gradient. Returns 95% CI for mean ΔE00 variance across random positions.