Colour difference calculator — Delta E 2000, Delta E 76 and OKLab distance

How to use the colour difference calculator

1. Enter the First colour and the Second colour in any CSS notation, or use the pickers.
2. Read ΔE2000 (CIEDE2000), the main result, and its What it means label.
3. Compare ΔE76 and ΔE OK if you need to match another tool’s method.
4. Check the WCAG contrast between them if the colours will sit on top of each other.

What it does and when to use it

ΔE (Delta E) is a number for how different two colours look. Designers use it to decide whether a re-created brand colour is close enough, whether two chart colours are distinct, or whether a hover state is visible. Developers use it to merge near-duplicate colours in a stylesheet.

A single number is easier to agree on than “looks about the same”. For named matches, the colour name finder uses the same OKLab distance. To find the closest Tailwind class, use the nearest Tailwind colour tool. For text legibility, the contrast checker is the right test.

How it works

Both colours are converted from sRGB to CIE Lab with a D65 white point.

• ΔE76 is the straight-line distance: √(ΔL² + Δa² + Δb²).
• ΔE2000 follows the CIEDE2000 formula of Sharma, Wu and Dalal (2005). It weights lightness, chroma and hue differences separately and adds a rotation term for blues, with kL = kC = kH = 1.
• ΔE OK is the straight-line distance in OKLab, Björn Ottosson’s perceptual colour space.

The “What it means” label reads ΔE2000 against these bands: under 1, not perceptible; under 2, perceptible only on close inspection; under 10, perceptible at a glance; under 50, clearly different; 50 or more, very different.

Worked examples

These are the calculator’s own results.

Tailwind blue-500 and blue-600. #3b82f6 against #2563eb gives ΔE2000 10.88 (“Clearly different colours”), ΔE76 18.98 and ΔE OK 0.0823. Their contrast ratio is only 1.41:1, so neither works as text on the other.

Two close greys. #808080 against #858585 gives ΔE2000 1.86: “Perceptible only on close inspection”. Fine for a subtle border, too weak for a state change.

Opposites. Red #ff0000 against cyan #00ffff: ΔE2000 70.96, ΔE76 156.45 and ΔE OK 0.4944. ΔE76 more than doubles the ΔE2000 figure for saturated colours.

Limits and tips

• The bands are a rule of thumb. Lighting, screen, colour size and the viewer all change what is visible.
• Transparency is not taken into account; blend translucent colours onto their background first.
• Calculations run in your browser.