Delta E Explained: Measuring Color Difference for Print and Screen

Two grays sit next to each other in a design system: #6b7280 and #6c727d. Are they the same color or did someone fat-finger a hex code? Your eye says "close, maybe identical." Your build pipeline says "two different tokens." You need a number that settles it, and that number is Delta E.

Delta E (written ΔE) is the standard way to answer "how different do these two colors look?" Not how different the RGB codes are, but how different they look to a human eye. That distinction is the whole point, and it is the reason a raw hex comparison will mislead you over and over.

Delta E is a distance, not a vibe

Here is the concrete part most people skip. Delta E is literally a distance — the straight-line (Euclidean) distance between two colors plotted in the CIELAB color space. CIELAB has three axes: L\ for lightness (0 black to 100 white), a\ running green to red, and b\* running blue to yellow. Drop two colors into that 3D space, draw a line between them, measure its length. That length is ΔE.

The trick is the space you measure in. RGB and hex are not perceptually uniform: a fixed numeric step looks like a big change in some regions and a tiny one in others. Two greens that differ a lot in RGB code can look nearly identical, while two blues with a smaller RGB gap look clearly apart. CIELAB was built so that equal distances feel like roughly equal perceived differences. That is why every ΔE formula starts by converting hex to Lab first — you cannot measure perceived difference in a space that does not match perception.

So the algorithm is: convert each color from sRGB to CIELAB (using the D65 white point, the standard for daylight and screens), then measure the gap. The Delta E color difference calculator does exactly that and shows you both Lab triplets so you can see where the number came from.

What the number actually means

A ΔE value is only useful if you know the bands. The graphic-arts reading, which most print and brand specs reference, goes like this:

ΔE below 1 — not perceptible to the human eye. The two colors are, for practical purposes, the same.
1 to 2 — perceptible only on close inspection, side by side, by someone looking for it.
2 to 10 — obvious at a glance.
10 to 50 — a clearly different color.
Above 50 — essentially opposite colors.

The first band is the load-bearing one. A ΔE under 1 is genuinely hard to see. So if a teammate tweaks a button background and the before/after pair comes out at ΔE 0.6, the change is invisible and probably is not worth a changelog entry. If it comes out at ΔE 4, users will notice, and it belongs in a design review. The number turns "looks a bit off" into something you can defend.

These bands are graphic-arts practice, not a hard physical law, but they are remarkably consistent across people with normal color vision.

A worked example: two close blues

Numbers make this real. Take the Sharma reference pair, two blues sitting near the bottom of the b\* axis:

Color A: Lab(50, 2.68, −79.78)
Color B: Lab(50, 0.00, −82.75)

Same lightness (L\ = 50), so the difference lives entirely in the a\ and b\ axes. The deltas are Δa\ = 2.68 and Δb\* = 2.97.

Run the plain Euclidean formula (CIE76) and you get √(0² + 2.68² + 2.97²) = √(7.18 + 8.82) = √16.00 = 4.0. By the bands above, 4.0 reads as "obvious at a glance."

Now run CIEDE2000 on the same pair and you get ≈ 2.04 — barely half. Which one is right? Your eye agrees with CIEDE2000: these two blues look close, not obviously different. CIE76 nearly doubled the perceived gap because it treats the saturated-blue region the same as everywhere else, and that region is exactly where straight Euclidean distance over-reports. This single pair is the cleanest argument for using the modern formula.

CIE76 versus CIEDE2000

CIE76 is the original 1976 definition: pure Euclidean distance in Lab. It is fast and easy to explain, but it treats every direction in color space as equal. In reality the eye is not equally sensitive everywhere — it over-reports differences in saturated blues and under-reports them in light grays.

CIEDE2000 is the 2001 fix that almost everyone uses today. It keeps the Lab foundation but adds weighting terms for lightness, chroma, and hue, plus a rotation term specifically for the blue region (the same region that tripped up our worked example). The result tracks human perception far more closely. There is also a middle option, CIE94, which adds chroma weighting tuned for graphic arts but stops short of the full 2000 treatment.

The practical rule: default to CIEDE2000. Reach for CIE76 only when a legacy specification explicitly names it. A pair that "passes" by CIE76 can still fail perceptually, which is the worst kind of false positive when you are signing off a print run.

Print QC, brand consistency, and screen calibration

This is where Delta E earns its keep. Print shops and packaging vendors hold a brand color to a tolerance — commonly ΔE2000 ≤ 2 for premium work — so the logo on a box matches the logo on the website. They measure the printed sheet with a spectrophotometer, convert to Lab, and compute ΔE against the brand spec. Inside tolerance, it passes; outside, it gets a re-run. Textile and paint matching usually allow a looser ΔE of 3 to 5, because those substrates simply cannot hold tighter.

I keep this open whenever a proof comes back from the printer. The brand blue is locked at a hex value; I sample the proof to a slightly different hex, drop both in, switch to CIEDE2000, and read the result. Under 2, I approve the run. At ΔE 5, I send it back with the number attached instead of a vague complaint. Having the side-by-side swatch and the Lab readout in the same view means the rejection email has evidence in it, and that has saved me at least one argument with a vendor who insisted the match was "fine."

One honest caveat about screens. ΔE describes the colors themselves, device-independently. It does not predict how your particular monitor renders them. If your panel is wide-gamut, uncalibrated, or in a warm night mode, two colors with a tiny ΔE can still look different on your screen, and two with a larger ΔE can look closer than the number says. For critical color work, calibrate the display first, then trust the number over your eyes. When you also need to check that text stays legible against a background, pair this with the color contrast checker, which speaks WCAG ratios rather than perceptual distance — different question, complementary answer.

When to reach for it

Use Delta E whenever "are these the same color?" needs a defensible answer: collapsing duplicate tokens in a design system, signing off a print proof, deciding whether a CSS edit is even visible, or teaching why RGB distance lies. Convert to Lab, pick CIEDE2000, read the band. Below 1 means stop worrying; above 5 means someone will notice. Everything interesting happens in between, and now you can put a number on it.

Made by Toolora · Updated 2026-06-13