Skip to content
Lizely

Color Difference Calculator

Compare two opaque HEX colors with a standards-based CIEDE2000 value and inspect each D50 CIELAB coordinate.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Enter two opaque six-digit sRGB HEX colors, including each leading #.
  2. 2.Select Compare colors to convert both values to D50 CIELAB and calculate CIEDE2000.
  3. 3.Record the original HEX values and Delta E 2000 result with the tolerance and viewing context for your workflow.

About Color Difference Calculator

Color Difference Calculator compares two opaque sRGB colors with the CIEDE2000 color-difference formula. Enter one six-digit HEX value for each color, run the comparison, and read the numeric Delta E 2000 result alongside the D50-adapted CIELAB coordinates used by the calculation. Everything runs locally in the browser and no color values are uploaded.

The accepted input is deliberately narrow: exactly #RRGGBB. Three-digit shorthand, alpha-bearing HEX, named colors, display-p3 values, and malformed strings are rejected instead of being silently reinterpreted. This makes the input color space and opacity explicit. If transparency matters, composite both colors over the same known background before comparing them because a translucent foreground is not one standalone opaque sRGB color.

Conversion follows the CSS Color 4 sample path. 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. The visible Lab values are rounded for display, while the unrounded numbers continue into the difference formula.

CIEDE2000 is more complex than a straight Euclidean distance. It adjusts the CIELAB a axis near neutrals, handles hue angles across the zero-degree boundary, weights lightness, chroma, and hue differences, and includes a rotation term for the blue region. This implementation uses the common default parametric weights kL, kC, and kH equal to one.

The number is symmetric for the same default conditions: comparing A with B yields the same result as comparing B with A, subject only to floating-point display precision. Identical colors return zero. Larger values indicate a greater formula-defined difference, but the page intentionally does not label a fixed number as pass, fail, identical to every observer, or acceptable for every production process.

Perception depends on viewing conditions, display calibration, ambient light, surface texture, surrounding colors, observer vision, and the chosen tolerance for a workflow. Printing, paint, textiles, brand review, photography, and interface design can use different instruments and acceptance limits. Treat the result as a reproducible comparison aid, not a guarantee that two physical samples will match.

The two color swatches provide a quick visual reference, but a screen preview is not colorimetry evidence. Browser rendering, monitor gamut, color profiles, brightness, and calibration can change appearance. The numeric calculation is based only on the entered sRGB coordinates and the documented conversion path; it cannot measure a real object or infer a printer profile.

Use the tool when checking whether two CSS colors are mathematically close, documenting a design-token revision, comparing sampled image colors, or creating repeatable QA notes. Record both original HEX values, the reported Delta E 2000 number, and the viewing or production context if another person must reproduce the decision.

Input validation occurs before calculation. Empty values, missing hashes, shorthand, alpha, non-hexadecimal characters, and extra digits produce an explicit error and no result. The implementation also carries 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.

This is a deterministic client-side calculator, not an image picker, spectrophotometer, ICC profile converter, accessibility contrast checker, or certification service. For text readability use a contrast-ratio tool. For physical manufacturing decisions use calibrated measurement equipment and the standard, tolerances, illuminant, and observer conditions required by that process.

Methodology & sources

The browser parses two opaque #RRGGBB sRGB colors, applies the CSS Color 4 sRGB-to-linear, D65 XYZ, Bradford D50 adaptation, and CIELAB conversions, then calculates CIEDE2000 with kL=kC=kH=1. The implementation is checked against eight Sharma supplemental Lab pairs.

Frequently asked questions

What does the Delta E 2000 number mean?
It is a formula-based numerical difference between two CIELAB colors under default weighting. A larger number means a greater calculated difference, but there is no universal pass/fail threshold.
Why are only six-digit HEX colors accepted?
The tool compares opaque sRGB colors. Rejecting shorthand, alpha, and other color spaces prevents hidden parsing or compositing assumptions.
Which white point is used for Lab?
sRGB is converted through D65 XYZ, Bradford-adapted to D50, and then converted to CIELAB, following the CSS Color 4 sample conversion path.
Can this prove two printed samples match?
No. Physical matching needs calibrated instruments and process-specific illuminant, observer, profile, substrate, and tolerance conditions.

Related tools

Color Tools guides

View all