Delta E 2000 (CIEDE2000) is a perceptual color difference formula that scores how far apart two colors sit in CIELAB space, and the Color Difference Calculator applies that formula to two opaque six-digit sRGB HEX values so web designers can see whether two tokens, swatches, or sampled pixels are mathematically close enough to swap. You paste two #RRGGBB strings, run the comparison, and the page returns the source HEX values, each D50-adapted CIELAB coordinate (L*, a*, b*), and a single Delta E 2000 number — all calculated locally in the browser with no upload. Because the underlying math follows the CSS Color 4 conversion path and is checked against eight reference pairs from the Sharma, Wu, and Dalal supplemental dataset, the result is reproducible: comparing A against B yields the same number as comparing B against A. Identical inputs return zero, larger values mean a greater formula-defined gap, and whether that gap is acceptable depends on the tolerance your design system or QA process already defines. The calculator is not a grading service, an accessibility tool, or a print-matching instrument — it is a deterministic CIEDE2000 reference for sRGB color tokens you can compare, document, and revisit.
Why web designers compare HEX tokens with CIEDE2000
Design systems live or die by consistency. A primary blue that drifts a few units between the marketing site, the product UI, and the email template reads as a broken brand to a careful viewer, and a button color that shifts between the design file and the shipped CSS creates a visual seam users feel without naming. Web designers compare HEX tokens to catch those drifts before they ship, and CIEDE2000 gives them a number to attach to the comparison rather than a hand-wavy "looks close." The formula is the international standard for color difference and has been used in print, photography, and manufacturing QA since the early 2000s, which means a Delta E 2000 result can be cited, archived, and re-checked later when the design system gets a revision.
Beyond drift detection, a CIEDE2000 reading supports three common web design tasks: documenting a design-token revision with a measurable justification, comparing a sampled image color against a target brand HEX to decide whether to use the sampled value or nudge it, and producing repeatable QA notes that another designer can verify without redoing the eyeball check. Each of those workflows benefits from a number that travels with the project, rather than a memory of how two swatches looked on someone's laptop at midnight.
Run a CIEDE2000 comparison on two HEX colors
- Enter two opaque six-digit sRGB HEX colors, including each leading #, in the calculator's input fields. Type or paste them exactly as they appear in your CSS, design tool, or color sampler.
- Select Compare colors to convert both values to D50 CIELAB and calculate the Delta E 2000 difference. The page shows the conversion and the result without leaving your browser.
- Record the original HEX values, the per-color D50 CIELAB coordinates, the reported Delta E 2000 number, and the tolerance and viewing context for your workflow so another reviewer can reproduce the decision.
What the calculator accepts and rejects
| Accepted as input | Rejected by the validator |
|---|---|
| #RRGGBB (six-digit, opaque, sRGB) | Three-digit shorthand such as #abc |
| Uppercase or lowercase hex digits | Alpha-bearing values such as #RRGGBBAA or #RGBA |
| Both leading hashes present | Missing # or stray whitespace inside the value |
| One input per color, two colors total | Named CSS colors such as "rebeccapurple" or "tomato" |
| — | Non-hex characters or extra digits beyond six |
| — | Display-p3, lab(), color(), or other color space syntax |
The narrow input rule is a feature, not a limitation. Every accepted value describes an exact opaque sRGB color, so the calculation never has to guess whether the user meant sRGB, display-p3, or a composited-on-background color. If a design asset uses transparency — an RGBA overlay, a translucent gradient stop, a button with an alpha — composite both colors over the same known background color first and feed the resulting opaque HEX into the calculator. Comparing a translucent foreground against a flat brand color otherwise hides a compositing assumption inside the comparison.
Reading the output for design-token QA
The calculator returns the source HEX values, each color's D50 CIELAB coordinates, and a single Delta E 2000 number. The HEX block echoes both inputs back so you can confirm the validator read what you intended. The D50 CIELAB block shows L*, a*, and b* for each color: L* is perceptual lightness on a zero-to-one-hundred scale, a* tracks green-versus-red along one axis, and b* tracks blue-versus-yellow along the other. The CIELAB values shown on the page are rounded for legibility, but the unrounded numbers continue into the difference formula, so the displayed result reflects the full-precision math rather than the rounded display.
The Delta E 2000 number is a single weighted distance in CIELAB space. A higher number means a larger formula-defined gap; identical colors return zero; and comparing A to B produces the same result as comparing B to A under the default weighting. The page intentionally does not stamp any fixed value as pass, fail, or acceptable, because that decision belongs to the workflow. Brand QA, product QA, accessibility review, and printer matching each carry their own tolerance, instrument, and viewing conditions, so the calculator treats the result as a reproducible comparison aid you judge against your team's rule.
That reproducibility is the practical value for design-token work. Two designers reviewing a revision a week apart can compute the same Delta E 2000 number from the same two HEX values without sharing a calibrated monitor or agreeing on screen brightness. The viewing context, tolerance, and decision belong to the team — the number belongs to the math.
Common web design tasks the calculator supports
- Design-token revisions: record the old and new HEX values of a token, attach the Delta E 2000 number to the change request, and let reviewers decide whether the shift crosses the team's tolerance.
- Brand color audits: compare the canonical brand HEX against the colors actually shipping in CSS, exported SVGs, and marketing templates to find accidental drift.
- Image-sampled color checks: take a HEX reading from a reference image (a product shot, a logo file, a mood board) and measure it against the target brand color to decide whether the sample is close enough to use as-is or needs nudging.
- Palette adjustments: when adjusting a generated palette for seasonal variants, run the new shades against the original to see how far each shift traveled.
- Documentation notes: store the original HEX pair, the Delta E 2000 result, and the workflow context in a design-system changelog or QA report so a future review can re-create the decision.
Pairing the calculator with a palette generator tuned for web design closes the loop: pick a base HEX, expand it into a candidate palette, then measure the perceptual gap between the candidates and the original to choose a set that stays inside your tolerance.
What the Color Difference Calculator does not do
The calculator is a deterministic client-side reference for opaque sRGB HEX comparisons. It is not an image picker, not a spectrophotometer, not an ICC profile converter, not an accessibility contrast checker, and not a certification service. The two visual swatches on the result page are a quick sanity check, not colorimetry evidence — browser rendering, monitor gamut, color profiles, brightness, and calibration can change how the swatches look on screen. The numeric result is based only on the entered sRGB coordinates and the documented conversion path, which is why it can verify that two CSS colors are mathematically close but cannot confirm two physical samples match.
For text readability against a background, use a WCAG contrast tool that reports a contrast ratio against AA and AAA thresholds. For physical manufacturing decisions — print runs, paint matches, textile dye lots, brand-color certification — use calibrated measurement instruments and the illuminant, observer, substrate, profile, and tolerance conditions required by that process. The Color Difference Calculator can document the design-side intent that feeds those decisions, but the production-side answer has to come from the production-side measurement.
The math behind the tool is documented and verifiable: each sRGB channel is normalized to zero through one, linearized with the sRGB transfer function, multiplied into CIE XYZ relative to D65, adapted from D65 to D50 with the Bradford matrix, and converted from D50 XYZ to CIELAB, following the CSS Color 4 sample conversion path. CIEDE2000 is then calculated with the default parametric weights kL, kC, and kH set to one, and the implementation is checked against eight sign-sensitive reference pairs from the Sharma, Wu, and Dalal supplemental dataset so changes to hue wrapping or weighting terms cannot pass only on easy identity cases. That is the full chain — anything beyond it is a different tool.