—
—
Load a gradient to see stop analysis.
Load a gradient to see pair analysis.
Copy CSS: All three CSS gradient syntaxes (linear, radial, conic) with position percentages.
Download PNG: 1200×300 pixel-accurate rasterisation with sRGB sampling.
Download SVG: Scalable linearGradient element with precise stop offsets.
Export JSON: Full analysis report including uniformity metrics, hue continuity, monotonicity score, and stop-pair comparison matrix (ΔE76, ΔE00, ΔEOK, WCAG, APCA for every pair).
Export CSV: Per-stop tabular data: Hex, Position, HSL, Lab, LCH, Luminance, sRGB/P3/Rec.2020 gamut status.
Share URL: Shareable link encoding the gradient as a URL parameter.
Fullscreen: Full-viewport preview (F).
This page is designed as the detail view for the Gradient Library (gradient-list). When you click "Inspect" or "Open Detail" on any gradient card in the library, it opens this page with the full gradient data encoded in the URL. You can also link back to the library from the Lab tab controls.
← Back to Gradient LibraryCSS Gradient Specification
CSS Images Module Level 3 (W3C): Defines linear-gradient(), radial-gradient(), and repeating variants. Interpolation is in the sRGB colour space with premultiplied alpha.
CSS Images Module Level 4: Adds conic-gradient() and
colour interpolation hints. The color-interpolation-method property
enables interpolation in OKLab, Lab, and other perceptually uniform spaces.
CSS Color Level 4: Extends colour functions to support lab(), lch(), oklab(), oklch(), displayP3, and rec2020 colour spaces.
CIEDE2000 Colour Difference (CIE 142-2001)
CIEDE2000 (ΔE₀₀) is the current CIE-recommended colour-difference formula. It corrects the perceptual non-uniformity of CIE76 with weighting functions for lightness, chroma, and hue, plus a rotation term for the blue region.
Guideline ranges: ΔE₀₀ <1 imperceptible, 1–2 perceptible by trained observers, 2–5 clearly visible, 5–10 large, >10 very large.
Reference: Sharma, Wu, & Dalal (2005). "The CIEDE2000 color-difference formula." Color Res. App., 30(1), 21–30.
WCAG 2.2 Contrast Requirements
Success Criterion 1.4.3 (AA): Normal text requires at least 4.5:1 contrast ratio. Large text (≥18pt or bold ≥14pt) requires 3:1.
Success Criterion 1.4.6 (AAA): Normal text requires 7:1; large text requires 4.5:1.
Contrast formula: (L1 + 0.05) / (L2 + 0.05) where L is relative luminance per WCAG 2.x definition.
APCA — Accessible Perceptual Contrast Algorithm
APCA (Somers 2022) is the candidate replacement for WCAG 2.x contrast. It models perceptual lightness using exponents (0.56 background, 0.57 foreground) and produces a Lightness Contrast (Lc) value in the range –108 to +106.
Guideline: |Lc| ≥ 60 for body text, ≥ 45 for large text, ≥ 30 for non-text elements. Polarity matters: dark text on light bg vs light text on dark bg use different thresholds.
Gamut Boundaries — sRGB, Display P3, Rec. 2020
- sRGB (IEC 61966-2-1): Standard web colour space. Primaries at (0.64,0.33), (0.30,0.60), (0.15,0.06). D65 white point.
- Display P3 (DCI-P3 D65): ~25% wider gamut than sRGB, supported by modern Apple and HDR displays.
- Rec. 2020 (ITU-R BT.2020): Ultra-wide gamut for HDR/UHD content. ~75% of CIE 1931 visible gamut.
CIE 1931 Standard Observer & Chromaticity
CIE 15:2004: The CIE 1931 2° standard observer defines colour-matching functions x̄(λ), ȳ(λ), z̄(λ) over 380–780 nm. The chromaticity diagram plots x = X/(X+Y+Z) vs y = Y/(X+Y+Z), encompassing the visible gamut as the spectral locus.
The chromaticity diagram in this tool shows the spectral locus, sRGB gamut triangle, D65 white point, and the gradient's colour trace through xy space.
Perceptual Uniformity & OKLab
OKLab (Ottosson 2020): A perceptually uniform colour space designed for gradient interpolation and colour manipulation. Addresses CIE Lab's blue-purple hue non-linearity.
Perceptual uniformity scoring: A gradient is perceptually uniform when the ΔE₀₀ between each adjacent pair of sampled points is approximately equal. The Coefficient of Variation (CV = σ/μ) measures this: CV < 0.3 = uniform.
Relative Luminance (WCAG 2.x / IEC 61966-2-1):
if C_srgb <= 0.04045: C_lin = C_srgb / 12.92
else: C_lin = ((C_srgb + 0.055) / 1.055)^2.4
Relative Luminance:
Y = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
Range: 0 (black) to 1 (white)
Colour Difference Metrics:
ΔE*ab = sqrt[(ΔL*)² + (Δa*)² + (Δb*)²]
CIEDE2000 (ΔE₀₀):
G = 0.5 * [1 - sqrt(C̄⁷ / (C̄⁷ + 25⁷))]
a'ᵢ = aᵢ * (1 + G)
C'ᵢ = sqrt(a'ᵢ² + bᵢ²), h'ᵢ = atan2(bᵢ, a'ᵢ)
ΔH' = 2*sqrt(C'₁*C'₂) * sin(Δh'/2)
SL = 1 + 0.015*(L̄'-50)² / sqrt(20+(L̄'-50)²)
SC = 1 + 0.045 * C̄', SH = 1 + 0.015 * C̄' * T
T = 1 - 0.17cos(h̄'-30) + 0.24cos(2h̄') + 0.32cos(3h̄'+6) - 0.20cos(4h̄'-63)
RT = -sin(2*ΔΘ) * RC (rotation term)
ΔE₀₀ = sqrt[(ΔL'/SL)² + (ΔC'/SC)² + (ΔH'/SH)² + RT*(ΔC'/SC)*(ΔH'/SH)]
ΔEOK (OKLab Euclidean):
ΔEOK = sqrt[(ΔL)² + (Δa)² + (Δb)²]
(Scaled ×100 for display parity with ΔE₀₀)
OKLab (Ottosson 2020):
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
Step 2: Cube root (non-linear):
l' = cbrt(l), m' = cbrt(m), s' = cbrt(s)
Step 3: LMS' to OKLab (via M2):
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'
CIE Lab and LCH (CIE 15:2004):
f(t) = (29/6)²*t/3 + 4/29 otherwise
L* = 116 * f(Y/Yn) - 16
a* = 500 * [f(X/Xn) - f(Y/Yn)]
b* = 200 * [f(Y/Yn) - f(Z/Zn)]
White point (D65): Xn=0.95047, Yn=1.0, Zn=1.08883
LCH (cylindrical):
C* = sqrt(a*² + b*²)
h° = atan2(b*, a*) mod 360°
Contrast Formulas:
CR = (L1 + 0.05) / (L2 + 0.05)
where L1 > L2, L = relative luminance
AA: ≥ 4.5:1 (normal), ≥ 3:1 (large)
AAA: ≥ 7:1 (normal), ≥ 4.5:1 (large)
APCA (Somers 2022):
Sb = Yb^0.56, Sf = Yf^0.57
C = (Sb - Sf) * 1.14
Lc = |C| < 0.1 ? 0 : (C > 0 ? C-0.027 : C+0.027) * 100
Thresholds: |Lc| ≥ 60 body text, ≥ 45 large, ≥ 30 non-text
Perceptual Uniformity Scoring:
Compute ΔE₀₀(sample[i], sample[i+1]) for i=0..N-2
μ = mean(ΔE steps)
σ = stddev(ΔE steps)
CV = σ / μ (Coefficient of Variation)
Verdict:
CV < 0.3 → Uniform (perceptually smooth)
CV 0.3–0.6 → Moderate (acceptable)
CV > 0.6 → Non-uniform (visible banding risk)
Hue Continuity:
Max hue jump < 60° → Continuous
Max hue jump ≥ 60° → Discontinuous (hue shift)
Lightness Monotonicity:
Score = max(inc, dec) / total steps
> 85% → Monotonic | ≤ 85% → Non-monotonic
CSS Gradient Syntax:
linear-gradient(angle, color1 pos1%, color2 pos2%, ...)
Radial:
radial-gradient(circle, color1 pos1%, color2 pos2%, ...)
Conic:
conic-gradient(from angle, color1 pos1%, color2 pos2%, ...)
CSS Color Level 4 interpolation:
linear-gradient(in oklab, color1, color2)
linear-gradient(in lab, color1, color2)
linear-gradient(in oklch longer hue, color1, color2)
CSS Gradients & Color Specifications
[2] W3C (2024). CSS Images Module Level 4. W3C Working Draft.
[3] W3C (2024). CSS Color Level 4. W3C Candidate Recommendation.
[4] IEC 61966-2-1:1999. Colour management — Default RGB colour space — sRGB.
Colour Science & Difference Metrics
[6] Sharma, G., Wu, W., Dalal, E.N. (2005). The CIEDE2000 color-difference formula: Implementation notes. Color Res. App., 30(1), 21–30. DOI: 10.1002/col.20070
[7] CIE (2001). Improvement to industrial colour-difference evaluation. CIE 142-2001.
[8] Ottosson, B. (2020). A perceptual color space for image processing. bottosson.github.io/posts/oklab/
Accessibility & Contrast
[10] Somers, A. (2022). APCA Contrast Algorithm — Advanced Perceptual Contrast Algorithm. github.com/Myndex/SAPC-APCA
[11] W3C (2024). WCAG 3.0 Working Draft — Visual Contrast of Text.
Colour Harmony & Gamut
[13] ITU-R BT.2020-2 (2015). Parameter values for ultra-high definition television systems.
[14] Apple (2017). Wide Color — Working with Display P3 images on iOS and macOS. Developer Documentation.
Perceptual Uniformity Research
[16] Bujack, R., Turoňová, T.L., Linsen, L. (2022). The Non-Uniform Perceptual Quality of Common Colormaps. IEEE Trans. Vis. Comp. Graphics.
[17] Szafir, D.A. (2018). Modeling Color Difference for Visualization Design. IEEE Trans. Vis. Comp. Graphics, 24(1), 392–401.
About This Tool
This tool provides research-grade analysis of individual gradients with full CIE Lab, OKLab, HSL, ΔE₀₀/76/OK, CIE 1931 chromaticity, gamut coverage, WCAG/APCA contrast, perceptual uniformity, hue continuity, and lightness monotonicity — entirely client-side (zero network). Not a substitute for calibrated measurement or official CIE software.
Analyse the full 512-gradient collection: luminance distribution, ΔE₀₀ spread, and hue coverage across all curated gradients.
This tool evaluates gradient smoothness using the Coefficient of Variation (CV) of ΔE₀₀ steps. A truly perceptually uniform gradient would have CV = 0 (every step is identical). Real-world gradients have CV between 0.05 (near-perfect) and 2.0+ (highly irregular).
Step ΔE: ΔE₀₀(sample[i], sample[i+1]) for i = 0..N-2
CV = σ(steps) / μ(steps)
Verdict thresholds:
CV < 0.3 → "Uniform" (perceptually smooth, no banding)
CV 0.3–0.6 → "Moderate" (acceptable, minor irregularity)
CV > 0.6 → "Non-uniform" (visible steps, potential banding)
Note: sRGB interpolation is inherently non-uniform in CIE Lab.
For better uniformity, use OKLab interpolation (CSS Color L4).
Hue discontinuities occur when a gradient passes through achromatic regions (low saturation) or wraps around the hue wheel. This analysis detects such jumps.
Δh = |hue[i] - hue[i-1]|
if Δh > 180: Δh = 360 - Δh (shortest arc)
max_jump = max(Δh) across all steps
Continuous: max_jump < 60°
Discontinuous: max_jump ≥ 60°
Common discontinuity causes:
- Complementary colour pairs (hue jump ≈ 180°)
- Near-neutral midpoints (undefined hue)
- sRGB interpolation through grey zone