CIEDE2000 is the formula used to compute a Delta E 2000 value that summarizes the perceptual difference between two colors expressed in CIELAB, and a color difference calculator built for CSS code runs that formula on two opaque sRGB HEX values entered with a leading hash. The tool takes exactly two six-digit #RRGGBB strings, applies the CSS Color 4 conversion path from sRGB to linear light, multiplies into CIE XYZ relative to D65, adapts that XYZ from D65 to D50 with the Bradford matrix, converts to CIELAB, and finally computes CIEDE2000 with the common default parametric weights kL, kC, and kH all set to one. The result is a single symmetric number that describes how far apart the two entered colors sit on the formula's color-difference scale. Identical colors always return zero, and larger numbers mean a greater calculated difference. The arithmetic happens entirely in the browser, the entered HEX strings are never uploaded, and the implementation is checked against eight sign-sensitive reference pairs from the Sharma, Wu, and Dalal dataset so that hue wrapping and weighting changes cannot pass only on easy identity cases.
What CSS Color Codes the Calculator Accepts
CSS offers several ways to write a color, and this calculator deliberately narrows the door to one. Only opaque six-digit #RRGGBB strings are accepted, with both letters and digits required inside the six-character body and the leading hash mandatory. Three-digit shorthand like #fff, four- and eight-digit alpha-bearing HEX such as #ff0000ff, named keywords such as cornflowerblue, display-p3 values written inside the color() function, and any malformed input all produce an explicit error before any math runs.
| Input style | Example | Accepted? |
|---|---|---|
| Six-digit opaque HEX | #4A90E2 | Yes |
| Three-digit shorthand | #4A9 | No |
| Alpha-bearing HEX | #4A90E2FF | No |
| CSS named color | cornflowerblue | No |
| display-p3 function | color(display-p3 0.3 0.6 1) | No |
| Malformed string | 4A90E2 (no hash) | No |
The narrow input format is not an oversight. Rejecting shorthand, alpha, named colors, and other color spaces prevents the calculator from silently picking one parsing rule over another, which keeps the input color space and opacity explicit. If transparency matters for a workflow, the right move is to composite both HEX values over the same known background first and then enter those pre-composited opaque results. A translucent foreground is not a single standalone sRGB color, so the tool will not try to guess which background to assume.
How the CIEDE2000 Calculation Runs Locally
When you press Compare colors, the browser executes the same conversion path the W3C documents for the CSS Color 4 sample conversion code. Each sRGB channel byte is normalized to a value between zero and one, linearized with the sRGB transfer function, and then multiplied into CIE XYZ using the sRGB-to-XYZ matrix relative to the D65 illuminant. That XYZ is adapted from D65 to D50 with the Bradford chromatic adaptation matrix so the resulting Lab values sit on the same neutral axis that CIEDE2000 expects. The D50-adapted CIELAB coordinates are then rounded for display while the unrounded versions continue into the difference formula.
CIEDE2000 is more complex than a plain Euclidean distance in Lab. It adjusts the CIELAB a* axis near neutrals to avoid the blue-region distortion found in older Delta E formulas, handles hue angles that cross the zero-degree boundary, applies separate weights to lightness, chroma, and hue differences, and includes a rotation term specifically for the blue region. The implementation here uses the common default parametric weights kL, kC, and kH all equal to one, which matches the conditions under which the Sharma reference dataset is defined.
The number is symmetric for the same default conditions: comparing color A against color B produces the same result as comparing B against A, subject only to floating-point display precision. Validation is built into the calculator itself; the implementation 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. Readers who want to inspect the reference arithmetic can follow the Sharma CIEDE2000 implementation notes.
Compare Two CSS Color Codes in Three Steps
This is the shortest path from two CSS color codes to a Delta E 2000 reading.
- Enter two opaque six-digit sRGB HEX colors, including each leading #. Paste or type the first value into the left input and the second into the right. Both must be exactly #RRGGBB with no spaces, no shorthand, and no trailing alpha.
- Select Compare colors. The browser converts both values through the sRGB-to-linear, D65 XYZ, Bradford D50 adaptation, and CIELAB steps, then computes CIEDE2000 with kL = kC = kH = 1.
- Record the original HEX values, the Delta E 2000 result, and your viewing context. Write the two HEX strings alongside the numeric reading and a short note about the workflow that will consume the decision, such as design-token review, gradient-stop tuning, QA acceptance, or sampled-image comparison.
If either input fails validation, the tool stops before the math and surfaces a specific error rather than returning a misleading number. Empty values, missing hashes, three-character shorthand, eight-character alpha HEX, non-hexadecimal characters, and extra digits all trigger that explicit error path. For related walk-throughs on this calculator, the guide on reading Delta E 2000 in a chart format pairs naturally with this workflow.
Reading the D50 CIELAB Coordinates
Alongside the Delta E 2000 score, the calculator surfaces the D50-adapted CIELAB values for each color: L* for perceptual lightness on a zero to one hundred scale, a* for the green-to-red opponent axis, and b* for the blue-to-yellow opponent axis. These three numbers are the inputs that CIEDE2000 actually compares, and seeing them in the result makes it easier to reason about why two close HEX pairs diverge in a particular direction.
For example, two pairs that share the same L* but differ on a* and b* can produce a different Delta E reading than two pairs with the same a* and b* but very different L*, since CIEDE2000 applies separate lightness, chroma, and hue weighting terms in its formula. The visible Lab values are rounded for display, while the unrounded numbers continue into the difference formula, so the table you see is for explanation and the score you see is the one produced by full-precision arithmetic.
When a Color Difference Calculator Helps
A standards-based color difference calculator fits neatly into a few recurring CSS and design workflows. Designers can use it to document whether a design-token revision moved a brand color far enough to need stakeholder approval. Front-end engineers can use it to confirm that two hex stops in a CSS gradient are mathematically close enough to land in the same perceptual band. QA teams can use it to compare colors sampled from screenshots against the original CSS source. Researchers and accessibility consultants can use it as a numerical companion to contrast-ratio tools when documenting color decisions.
| Use case | What the tool does | What it does not do |
|---|---|---|
| Design-token revision | Quantifies the perceptual gap between an old and new HEX value | Decide if a rebrand is approved |
| Gradient stop check | Confirms two HEX stops sit inside a target CIEDE2000 band | Render the gradient on screen |
| QA against source | Compares a sampled HEX against the original CSS value | Catch every display-calibration difference |
| Acceptance limit | Returns a reproducible number for the record | Replace a workflow-specific tolerance |
Each row in that table points to the same outcome: use the tool to put a defensible number on a color decision, then apply your own workflow tolerance on top. Exact figures for any specific pair come from running the calculator rather than from a fixed lookup table.
What Delta E 2000 Does and Does Not Prove
The number from the calculator is a formula-defined comparison of the two entered sRGB coordinates, nothing more and nothing less. It is a reproducible aid for documentation, not a guarantee that two physical samples will match under every viewing condition. Perception depends on the viewing setup, ambient light, surface texture, surrounding colors, and the individual observer, and acceptance limits vary widely across printing, paint, textiles, brand review, photography, and interface design.
The two on-screen swatches shown next to the inputs are a quick visual reference, not colorimetry evidence. Browser rendering, monitor gamut, color profiles, brightness, and calibration can change the appearance of those swatches without changing the underlying math. The numeric calculation is based only on the sRGB coordinates you enter and the documented CSS Color 4 conversion path, so it cannot measure a real object or infer a printer profile.
For text readability against a background, use a dedicated contrast-ratio tool that follows the WCAG relative-luminance formula. For physical manufacturing decisions, use calibrated measurement instruments and the standard, illuminant, observer, substrate, and tolerance conditions required by that process. Treat the calculator as a deterministic client-side aid that gives you the same Delta E 2000 number for the same two HEX values, every time, in your own browser.
For a deeper look, see Gradient Color Palette: Build It Visually and Copy the CSS.