A Delta E calculator is a tool that returns a single number describing how far apart two colors are under a standardized perceptual color-difference formula. The Color Difference Calculator applies CIEDE2000, the modern default, by reading two opaque six-digit sRGB HEX values such as #1A6FB2 and #2B80C3, converting each through D65 XYZ, applying a Bradford chromatic adaptation from D65 to D50, and producing CIELAB coordinates before running the CIEDE2000 weighting with kL, kC, and kH each set to one. The output is a symmetric, reproducible number: zero means the pair is identical, and larger values mean a greater formula-defined gap. The same two inputs will yield the same result each time, subject only to floating-point display rounding, because every step from the sRGB transfer to the final weighting is deterministic. Because the calculation is purely arithmetic on the coordinates you provide, it cannot certify that two physical samples match; it is best treated as a documented, repeatable comparison aid for design-token revisions, sampled image pixels, QA notes, and code review of CSS colors.
What the Tool Accepts and Returns
The Color Difference Calculator is deliberately narrow about what it takes in, which is the only way to keep the result unambiguous. Both inputs must be opaque six-digit sRGB HEX values, each starting with a leading #. Three-digit shorthand like #1AB, alpha-bearing HEX such as #1A6FB280, named CSS colors, display-p3 function values, and any string with the wrong length or non-hexadecimal characters are rejected before the math runs, and no result is shown in those cases. That rejection policy is on purpose: each of those alternative formats implies either transparency, a different color space, or an assumption about parsing that the tool refuses to make for you. If transparency matters in your design, composite both colors over the same known background first and compare the resulting opaque sRGB values; a translucent foreground is not one standalone opaque sRGB color.
| Input format | Example | Outcome |
|---|---|---|
| Opaque six-digit sRGB HEX | #1A6FB2 | Accepted |
| Three-digit shorthand | #1AB | Rejected |
| Alpha-bearing eight-digit HEX | #1A6FB2C0 | Rejected |
| Missing leading hash | 1A6FB2 | Rejected |
| Named CSS color | royalblue | Rejected |
| display-p3 function | color(display-p3 0.1 0.4 0.7) | Rejected |
| Empty value | (blank) | Rejected |
Once both values pass validation, the calculator returns three things: the two original HEX values you entered, the D50 CIELAB L*, a*, and b* of each color used in the difference calculation, and a single numeric Delta E 2000 result summarizing the perceptual gap. Nothing is uploaded; every step runs in the browser on the device you opened the tool with.
Enter Two HEX Colors and Read the Delta E Number
- Open the Color Difference Calculator in any modern desktop or mobile browser. No account, no install, and no upload — every step runs locally in the page.
- In the first field, type one opaque six-digit sRGB HEX color, including the leading #. Repeat with a second opaque six-digit sRGB HEX color in the second field.
- Select Compare colors. The tool validates both inputs, rejects any malformed string with an explicit error, and only proceeds when both fields are clean.
- Read the output panel. You will see the two original HEX values, the D50 CIELAB L*, a*, b* triple for each, and a single Delta E 2000 number summarizing the perceptual gap.
- Copy or screenshot the HEX values, the CIELAB triples, and the Delta E number alongside a note about your viewing or production context — calibration of the screen, ambient lighting, and the tolerance your brand or print process requires — so anyone reproducing the comparison later has the same inputs and intent.
How the Conversion Path Works
The number you read is only as good as the conversion that produces it. This implementation follows the CSS Color 4 sample path, which is the publicly documented reference for browser color math. Each sRGB channel value is first normalized from 0–255 to the range 0 through 1, then linearized with the sRGB transfer function: channels at or below 0.04045 are divided by 12.92, and channels above that threshold go through the gamma curve ((c + 0.055) / 1.055) raised to 2.4. The three linear channels are then multiplied into CIE XYZ relative to the D65 reference illuminant, the matrix most sRGB displays are tuned against.
Because CIELAB is defined relative to D50, not D65, the XYZ values are then adapted with a Bradford transform, which models how a typical human visual system re-maps a white point. The adapted D50 XYZ values feed the standard CIELAB formulas, producing L* for lightness, a* for the green–red axis, and b* for the blue–yellow axis. The CIELAB triples shown in the result panel are rounded for readability, but the unrounded numbers continue into the difference formula so display rounding cannot bias the final score.
CIEDE2000 is more than a straight Euclidean distance in CIELAB. It adjusts the a* axis near neutral colors, treats hue angles correctly across the 360°/0° wraparound, weights lightness, chroma, and hue differences separately, and adds a rotation term that improves agreement in the saturated blue region. With the default weights kL = kC = kH = 1, comparing A with B yields the same number as comparing B with A, which is a useful sanity check whenever the result looks surprising. For the full method, the reference matrices, and the sample source code, see the W3C CSS Color 4 conversion and DeltaE2000 sample code.
A Worked Example: One Channel From sRGB to Linear
As a concrete illustration of the first conversion step, take the green channel of #808080, a neutral mid-gray. The hex digit 80 equals 128, so the normalized sRGB value is 128 / 255 ≈ 0.50196. That value is above the 0.04045 threshold, so the linear value is ((0.50196 + 0.055) / 1.055)^2.4 = (0.52792)^2.4 ≈ 0.2159. This linear value is what the CIELAB pipeline actually uses; the original 0.50196 number is not fed directly into the XYZ matrix. The blue and red channels go through the identical step, and only after all three channels are linearized does the D65 XYZ matrix combine them. For the verified Delta E number itself, run the actual pair in the tool — the full CIEDE2000 weighting has enough terms (lightness, chroma, hue, and a blue-region rotation) that hand-calculating it invites arithmetic mistakes.
What the Resulting Number Does and Doesn't Prove
The Delta E 2000 value is a formula output, not a perception verdict. A larger number means a greater calculated distance under the documented assumptions; a smaller number means the two CIELAB triples are closer in that weighted sense. Identical inputs always return zero, and the same pair of inputs always returns the same number, subject only to floating-point display rounding, because the pipeline is deterministic. The implementation also runs against eight sign-sensitive reference pairs from the Sharma, Wu, and Dalal supplemental dataset, so changes to the hue-wrapping or weighting terms cannot pass only on easy identity cases — see the Sharma, Wu and Dalal CIEDE2000 implementation data for the reference values used to validate any implementation.
What the number does not prove is that two printed samples, two painted swatches, or two photographed patches will look the same to every observer. Real-world matching depends on the substrate, the inks or pigments, the illuminant in the room, the observer's vision, the surrounding colors, and the tolerance the production process accepts. The two color swatches shown next to the result are a visual reference, not colorimetric evidence — browser rendering, monitor gamut, color profiles, brightness, and calibration all shift the on-screen preview.
When a Delta E Value Helps Your Workflow
Used with the right expectations, a Delta E 2000 number is one of the cleanest ways to attach a reproducible score to a pair of colors. Design-token revisions get a documented metric. Sampled image pixels get a comparable score between candidate swatches. QA notes get a specific number attached to a hex pair and a viewing context. None of those uses replace calibrated measurement on the actual production surface, but they all benefit from a single value that does not depend on who is looking at the screen.
| Workflow | What the calculator gives you | What you still need |
|---|---|---|
| Design-token revision (CSS, design system) | A reproducible number that documents how close the new token is to the old | Visual review on calibrated displays |
| Sampled image pixels (palette extraction) | A comparable score between candidate swatches from a photo | Confirmation that the photo was color-managed when sampled |
| QA notes and change logs | A specific number attached to a hex pair and viewing context | Context about the device, the lighting, and the tolerance used |
| Print, paint, or textile matching | A mathematical comparison of two sRGB values | Calibrated spectrophotometer and the process-specific illuminant, observer, profile, substrate, and tolerance |
| Text readability on a background | A formula-defined perceptual gap, but not a readability score | A contrast-ratio tool such as the Color Contrast Checker for WCAG AA or AAA |
Limits Worth Knowing Before You Trust the Number
The Color Difference Calculator is a deterministic client-side calculator, not an image picker, a spectrophotometer, an ICC profile converter, an accessibility contrast checker, or a certification service. It measures nothing physical: it only does arithmetic on the sRGB coordinates you hand it. If a translucent foreground matters, composite both colors over a known background first and compare the resulting opaque sRGB values; a translucent overlay is not one standalone opaque sRGB color, and the conversion path does not include a compositing step.
The number is also not a guarantee of perceived equality. Two physically identical patches under one light source and one observer can produce an arbitrary-looking Delta E if the sRGB capture was not color-managed, just as two patches that look indistinguishable to a human can sit on either side of a strict tolerance if the workflow tolerance is tight. For decisions that bind physical production — press approval, brand-color sign-off, paint batch acceptance — pair the calculator with calibrated measurement equipment and the illuminant, observer, profile, substrate, and tolerance conditions required by that process.
For text-on-background readability, this is the wrong tool. The CIEDE2000 number tells you how far apart two colors are in weighted CIELAB space; it does not encode font size, font weight, or the contrast ratio that accessibility guidelines use. Reach for a dedicated contrast-ratio tool instead.
For a deeper walkthrough of the implementation, the role each weighting term plays, or extra examples of common color pairs, the Color Difference Calculator Explained: Delta E 2000 guide continues the same topic from a different angle.
If you're weighing options, Is a Color Difference Calculator Safe to Use Online? covers this in detail.