Delta E 2000 is the standards-based numeric distance between two colors expressed in CIE Lab space, and a color difference calculator that returns CIEDE2000 lets you compare two opaque six-digit sRGB HEX values and see exactly how far apart they sit on a perceptually weighted scale. The result is a single number that quantifies shades and variations: identical HEX pairs always return zero, while every additional unit indicates a greater formula-defined gap in lightness, chroma, or hue. CIEDE2000 is not a straight Euclidean distance. It adjusts the a* axis near neutral grays, handles hue angles that wrap across the zero-degree boundary, weights lightness, chroma, and hue differences separately, and adds a rotation term in the blue region. Because the conversion path runs through D65 XYZ, the Bradford D50 adaptation, and then CIELAB, two HEX values that look similar on screen are mapped into Lab coordinates before the formula is applied. The number is reproducible, symmetric for the same default weighting (kL = kC = kH = 1), and useful whenever you need a documented comparison rather than a visual guess.
What "Shades and Variations" Mean in Color Terms
In everyday color talk, a "shade" usually means a darker version of a base color produced by mixing in black, and a "tint" means a lighter version produced by mixing in white. "Tone" sits between them and refers to a version with reduced saturation. "Variations" is the looser umbrella term for any family of related colors — a primary brand red next to its hover state, a background neutral next to its border, or a primary palette color next to a derived accent. A color difference calculator quantifies the gap inside that family in a way screen comparison cannot.
The reason screen comparison falls short is that the eye flattens small differences under bright light and exaggerates others under dim light, while monitors themselves vary in gamut, brightness, and white point. CIEDE2000 was designed specifically to model perceived difference more accurately than earlier formulas. It asks, in effect: how far apart are these two colors if you account for human vision rather than raw sRGB channel differences? That makes it a sensible metric for deciding whether two CSS shades qualify as the same step in a design system, whether a sampled image color matches a brand swatch closely enough for documentation, or whether a revised token drifted from the previous one.
How CIEDE2000 Measures the Gap Between Two HEX Values
The conversion pipeline is deliberately narrow. Each sRGB channel is normalized to a value between zero and one, linearized with the sRGB transfer function, multiplied into CIE XYZ relative to the D65 illuminant, adapted from D65 to D50 with the Bradford matrix, and converted from D50 XYZ to CIELAB. The visible Lab values on the page are rounded for display, but the unrounded numbers continue into the difference formula, so what you read on screen is a clean version of the exact coordinates used in the calculation.
CIEDE2000 then computes the difference using the default parametric weights kL = kC = kH = 1. The formula adjusts the a* axis near neutral colors, handles hue angles that cross the zero-degree boundary, applies separate weights to lightness, chroma, and hue, and includes a rotation term for the blue region. This is why two pairs with identical straight-line distance in Lab can return different Delta E 2000 values — perceptually similar blues and perceptually similar grays are not the same problem.
The table below summarizes what the calculator accepts and what it rejects. The strict input rules exist so the input color space and opacity stay explicit; the tool deliberately does not silently reinterpret malformed strings.
| Input format | Accepted? | Reason |
|---|---|---|
| #RRGGBB (six digits, leading hash) | Yes | Matches opaque sRGB exactly |
| #RGB shorthand | No | Rejected on purpose to avoid hidden expansion |
| #RRGGBBAA with alpha | No | Transparency requires explicit compositing |
| RRGGBB without hash | No | Missing required # prefix |
| Named CSS colors (red, tomato) | No | Different color space |
| rgb(255, 0, 0) syntax | No | Parser-ambiguous; not supported |
| Empty string or extra digits | No | Validation fails before calculation |
The two color swatches shown next to the result are a visual reference, not colorimetric evidence. Browser rendering, monitor gamut, profile, brightness, and calibration can all change how a swatch looks on your screen. Treat the swatches as a sanity check that you typed what you meant to type, and treat the numeric Delta E 2000 value as the actual comparison.
Compare Two HEX Shades and Variations
To use the color difference calculator for shades and variations, follow these steps.
- Pick two opaque six-digit sRGB HEX colors that represent the shades or variations you want to compare, such as a base color and one of its derived states. Make sure each value includes the leading # and exactly six hexadecimal characters.
- Enter the first HEX value into the first color field and the second HEX value into the second color field. If you are working from sampled image colors, copy the values directly from the picker rather than transcribing them by hand.
- Select Compare colors. The tool converts both values through the sRGB-to-linear, D65 XYZ, Bradford D50 adaptation, and CIELAB pipeline, then runs CIEDE2000 with kL = kC = kH = 1.
- Read the numeric Delta E 2000 result alongside the D50-adapted CIELAB coordinates for each color. The Lab values show where each color sits on the lightness (L*), red-green (a*), and yellow-blue (b*) axes.
- Record the original HEX values, the reported Delta E 2000 number, and the viewing or production context for your workflow so another person can reproduce the decision.
If either input is malformed, the calculator produces an explicit error and no result, rather than a silent guess. This protects you from comparing values that were never on the same color space to begin with. For a deeper walkthrough of the formula itself, the guide on Delta E 2000 in the color difference calculator covers the same pipeline with more detail.
Reading the D50 CIELAB Coordinates Alongside the Result
A Delta E 2000 number on its own tells you the size of the gap but not where the gap lives. The D50 CIELAB coordinates fill in that picture. The L* axis runs from zero (black) to one hundred (white) and indicates perceived lightness. The a* axis runs from negative (green) through neutral gray to positive (red). The b* axis runs from negative (blue) through neutral gray to positive (yellow). When you compare two colors, the difference in L* tells you whether the variation is mostly a lightness step, while the difference in a* and b* tells you whether the variation moves toward a different hue or a different chroma.
Two colors can share an identical Delta E 2000 value for very different reasons. A small result from two dark slate grays is a near-pure lightness step. A small result from two saturated blues is a tiny hue and chroma shift inside a blue family. Both are valid shades or variations of their respective families, but they describe different design decisions. Reading the Lab values next to the Delta E 2000 result is what turns a single number into an actionable comparison.
CIELAB is designed so that equal numeric steps correspond more closely to equal perceived steps than equal steps in raw sRGB channels. That is the practical reason the calculator adapts from D65 to D50 with the Bradford matrix before converting to Lab — it follows the CSS Color 4 sample conversion path used across modern color tooling.
Tolerance, Viewing Conditions, and What the Number Does Not Tell You
CIEDE2000 is reproducible for the same default weighting: comparing color A against color B yields the same result as comparing color B against color A, subject only to floating-point display precision. Identical colors return zero. As the two colors move apart in Lab, the value grows. The number is mathematically symmetric, but it is not a universal verdict on whether two colors match.
The calculator intentionally does not label any fixed Delta E 2000 value as pass, fail, identical to every observer, or acceptable for every production process. Perception depends on viewing conditions, ambient light, surface texture, the colors surrounding the sample, observer vision, and the chosen tolerance for your workflow. A small result that is invisible on a calibrated display in a dim room can be visible on a glossy print under daylight. Different industries carry different acceptance limits. Print, paint, textiles, brand review, photography, and interface design all use different instruments and tolerance bands. Treat the result as a reproducible comparison aid, not a guarantee that two physical samples will match.
For text readability, a Delta E 2000 value is the wrong metric — use a contrast-ratio tool instead. For physical manufacturing decisions, calibrated spectrophotometers and the standard, illuminant, observer, profile, substrate, and tolerance conditions required by that process are required. The calculator is a deterministic client-side comparison of two opaque sRGB coordinates, not an image picker, not a spectrophotometer, not an ICC profile converter, and not a certification service.
Recording the Comparison So Others Can Reproduce It
A Delta E 2000 result only becomes useful documentation if the comparison can be reproduced later. The minimum record should include the two original HEX values with their leading #, the reported Delta E 2000 number, and the context in which the comparison was made. Context can be as simple as "design token revision, screen preview, ambient office light" or as detailed as "brand review, D65 booth, before reprint approval."
If you compare many shades against a single base color, store the Lab values too — they let you see which axis each variation moves along, which is faster than re-reading the formula for every pair. If your workflow has a tolerance band — for example, any token within a Delta E 2000 of 1.0 of its target is approved without sign-off — write the band into the same record so future reviewers do not have to re-derive the threshold. The calculator runs entirely in the browser and does not upload color values, so the same record is the only place the comparison history lives.
For documenting design-token revisions, comparing sampled image colors against a brand palette, or building repeatable QA notes, the same three pieces — HEX, Delta E 2000, context — are enough. The implementation is checked against eight sign-sensitive reference pairs from the Sharma, Wu, and Dalal supplemental dataset (per the CIEDE2000 implementation data), so the formula path is verifiable rather than approximate. That makes the recorded number something a teammate can re-run and reach the same result.
If you're weighing options, Color Difference Calculator Tips and Avoid Common Mistakes covers this in detail.