Skip to content
RGBHex

Interpolation Curve Analyzer

Plot how lightness, chroma, hue, and perceptual step size evolve across a gradient — to catch the gray dead zone, hue drift, and 8-bit banding before you ship it. Stops and space live in the URL, so any analysis is shareable.

Color stops
Interpolation space
Edit this gradient →

Diagnosis

  • Lightness ranges 0.55–0.80.
  • Chroma falls to 0.011 near t=0.45 — it passes through the gray dead zone.
  • Hue drifts 177° overall — a long hue sweep, which can make steps uneven.
  • Perceptual steps average ΔE2000 0.36 (max 1.18) — uneven.
  • 252 distinct 8-bit colors across 256 samples; longest flat run 2.
Lightness (L*)0.55–0.80
Chroma (C*)0–0.22

The dashed line marks the dead-zone threshold (chroma 0.05); below it, color reads as gray.

Hue (°)0–360
Step size (ΔE2000)max 1.2
Data table — 11 of 256 samples
Lightness, chroma, hue and per-step ΔE2000 sampled across the gradient.
tL*C*Hue°ΔEHex
0.000.5460.215263—#2563EB
0.100.5510.1702630.12#396BD4
0.200.5620.1242620.00#4C73BE
0.300.5800.0742600.19#607BA6
0.400.6020.0272440.48#748390
0.500.6290.0271150.64#888B79
0.600.6580.0671000.45#9B9363
0.700.6910.103950.17#AF9B4C
0.800.7240.129920.29#C3A335
0.900.7600.149890.26#D7AB1E
1.000.7950.162860.25#EAB308

How to read it

Set your stops and pick an interpolation space. The diagnosis up top states what it found in plain language; the four small charts and the data table back it up. Switch between OKLCH, OKLAB and sRGB to see how the same stops behave — then jump to the gradient generator to build the CSS.

Why it’s perceptual

Chroma and lightness come from OKLCH, and step size is ΔE2000 in Lab — never raw sRGB distance — so the curves reflect how a gradient actually looks, not just how its numbers move. Banding is measured as true 8-bit posterization, because that is what produces the visible stripes.

Frequently asked questions

What do the four curves show?

For each point along the gradient: lightness (L*) and chroma (C*) from OKLCH, the hue angle, and the per-step ΔE2000 (perceptual distance between consecutive samples). A flat, smooth set of curves means an even gradient; dips, spikes, and reversals point at the specific failure.

What is the gray “dead zone”?

When an interpolation passes through low chroma, the mid-gradient colors desaturate toward gray. The classic case is Blue→Yellow in sRGB, whose midpoint is literally #808080 gray. The chroma curve makes this visible: it dips below the dashed threshold. OKLCH/OKLAB usually keep chroma up — though watch hue sweeps, which can make ΔE steps uneven instead.

How does it detect banding?

By measuring real 8-bit posterization, not just ΔE. It samples the gradient at 256 steps, quantizes each to an 8-bit hex, and reports how many distinct colors result and the longest run of identical consecutive samples. Few distinct colors with long flat runs means visible bands on an 8-bit display — something a flat ΔE curve alone does not guarantee against.

Is the ΔE 2000 number an exact banding threshold?

No. ΔE2000 measures perceptual step size, and even steps make for a smooth gradient — but the often-cited “2.3 just-noticeable-difference” figure comes from older CIE76 work and is a rough rule of thumb, not a validated ΔE2000 threshold. Treat the ΔE curve as showing evenness; rely on the distinct-color and flat-run counts for actual banding risk.

Is my gradient sent anywhere?

No. Everything is computed in your browser. The stops and interpolation space are encoded in the URL so you can share an analysis, but nothing is uploaded.

Related tools

References

This tool’s color math is grounded in the following standards and primary sources.

Reviewed by Jimmy Raymond, Engineer
B.S. Environmental Engineering · B.S. Computer Science · Last reviewed June 2, 2026

Spotted an error? Let us know — reader corrections are the best review this site gets.