Skip to main content

Delta E Color Difference Calculator — ΔE76 / ΔE94 / CIEDE2000

Two HEX colors in, perceptual ΔE out — CIE76, CIE94 and CIEDE2000 with a plain reading of the result — browser-only

  • Runs locally
  • Category Color & Design
  • Best for Moving from a visual idea to reusable color values.
Color 1
Color 2
Formula
Side by side
#2563eb
#1d4ed8
Color difference · ΔE CIEDE2000
7.13
What this means
Perceptible at a glance (2 ≤ ΔE < 10)
All three formulas
CIEDE20007.13Perceptible at a glance (2 ≤ ΔE < 10)
CIE947.43Perceptible at a glance (2 ≤ ΔE < 10)
CIE769.16Perceptible at a glance (2 ≤ ΔE < 10)
Lab of color 1
L* 46.06 · a* 30.96 · b* -73.83
Lab of color 2
L* 39.01 · a* 36.76 · b* -74.57
Tolerances people use in practice

Print and packaging shops often hold a brand color to ΔE2000 ≤ 2; a ΔE of 1 is roughly the threshold a trained eye can catch on a press sheet. Textile and paint matching is usually looser (ΔE ≤ 3–5). Anything above 10 reads as a clearly different color to anyone.

What this tool does

Free Delta E (ΔE) color difference calculator. Paste two HEX colors and it converts each one to CIELAB and reports how far apart they look to the human eye, not just how different the raw RGB numbers are. Pick the formula that fits the job: CIE76 is the plain Euclidean distance in Lab, CIE94 adds graphic-arts chroma weighting, and CIEDE2000 is the modern standard that most print and brand specs reference today. The result comes with a plain-language reading: a ΔE below 1 is invisible, 1 to 2 shows up only on close inspection, 2 to 10 is obvious at a glance, and above 10 reads as a clearly different color. A side-by-side swatch and the full Lab values for both colors make it easy to see why the number landed where it did. Everything runs in your browser with one-click copy and a shareable link that reopens the exact pair and formula. 100% client-side, no upload.

Tool details

Input
Numbers
The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output
Live result + Copy + Preview
The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy
Browser-side processing
The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share
Shareable URL state
Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget
Initial JS <= 10 KB
No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit
Color & Design · Designer
Category and role tags drive related tools, internal links, and quick fit checks.

How to use

  1. 1. Input

    Paste or drop your content into the tool panel.

  2. 2. Process

    Click the button. All processing is local in your browser.

  3. 3. Copy / Download

    Copy the result or download to disk in one click.

How Delta E Color Difference Calculator fits into your work

Use it while choosing, checking, converting, or documenting colors for real interface work.

Color jobs

  • Moving from a visual idea to reusable color values.
  • Checking contrast and accessibility before a UI ships.
  • Keeping brand, design, and implementation color decisions aligned.

Color checks

  • Verify contrast against the actual background, not just a sample swatch.
  • Check dark and light themes separately when both exist.
  • Copy the final format your design system or codebase expects.

Good next steps

These links move the current task into a more complete workflow.

  1. 1 Color Shades Generator Turn one base color into a Tailwind-style 50–950 tint & shade scale — copy each step, export to Tailwind / CSS / SCSS / JSON — browser-only Open
  2. 2 Color Temperature to RGB Kelvin color temperature to approximate RGB and HEX, with a live swatch and lighting references, all in your browser Open
  3. 3 Color Converter HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK — instant 5-way conversion, live swatch — browser-only Open

Real-world use cases

  • Sign off a brand color before it goes to press

    Your brand blue is locked at a HEX value, and the printer sends back a proof you sampled to a slightly different HEX. Drop both in, switch to CIEDE2000, and read the ΔE. If it lands under 2 you approve the run; at ΔE 5 you send it back and ask for a tighter match. The side-by-side swatch and Lab readout give you something concrete to attach to the email instead of "it looks a bit off."

  • Compare two near-identical shades in a palette

    You inherited a design system with two grays that feel like duplicates — #6b7280 and #6c727d. Are they actually different or did someone fat-finger a hex? Paste both and the ΔE tells you instantly: a value under 1 means they are visually the same and you can collapse them into one token, saving everyone downstream a pointless decision.

  • Check whether a CSS edit changed a color meaningfully

    A teammate tweaked a button background and you are not sure the change is even visible. Compare the before and after HEX. A ΔE under 1 means the diff is invisible and probably not worth shipping; a ΔE of 4 means users will notice, so it belongs in the changelog and maybe a design review.

  • Teach or learn why RGB distance lies

    Demonstrating color science to a class or a junior designer? Enter a pair of blues and a pair of greens with the same RGB gap and show that their ΔE values differ wildly. The all-three-formulas table makes the point in one screen: CIE76 over-reports the blues, CIEDE2000 corrects it, and the perceptual reading lands where the eye actually does.

Common pitfalls

  • Reading RGB or hex distance as if it were perceptual difference. Two colors with a big hex gap can look nearly identical and two with a small gap can look very different. Only ΔE in Lab tracks what the eye sees — always convert first, which this tool does for you.

  • Using CIE76 when the spec or the eye wants CIEDE2000. CIE76 over-reports saturated blues and under-reports light grays, so a pair that passes by CIE76 may fail perceptually. Default to CIEDE2000 unless a legacy standard explicitly names CIE76.

  • Trusting an uncalibrated monitor over the number. If your screen is wide-gamut, in night mode, or simply not calibrated, two colors with a tiny ΔE can still look different on your panel. ΔE describes the colors themselves; calibrate the display before judging by eye.

Privacy

Every step — HEX parsing, the sRGB to CIELAB conversion, and all three ΔE formulas — is plain JavaScript that runs inside your browser tab. The colors you enter never leave the page and nothing is logged. The one caveat: the shareable link encodes both colors and the chosen formula in the query string, so a "share link" pasted into a chat will record those HEX values in the recipient server's access log. For confidential brand colors, use the copy button and paste the text rather than the URL.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role
Made by Toolora · 100% client-side · Updated 2026-05-30