Delta E 2000 (CIEDE2000) 是一種知覺色差公式，用來評分兩個顏色在 CIELAB 色彩空間中的距離，而 Color Difference Calculator 會將該公式套用於兩個不透明的六位數 sRGB HEX 值，讓網頁設計師能判斷兩個 token、色票或取樣像素是否在數學上足夠接近而可互換。您貼上兩個 #RRGGBB 字串、執行比較後，頁面會回傳來源 HEX 值、每個顏色的 D50 適應 CIELAB 座標 (L*、a*、b*)，以及單一的 Delta E 2000 數值——全部都在瀏覽器本地端運算，不會上傳任何資料。由於底層運算遵循 CSS Color 4 轉換路徑，並以 Sharma、Wu 和 Dalal 補充資料集中的八組參考配對進行驗證，結果具有可重現性：以 A 對 B 比較所得的數值，與以 B 對 A 比較的結果相同。相同的輸入會回傳零，數值越大代表公式定義的差距越大，而該差距是否可接受，則取決於您的設計系統或 QA 流程既有的容差標準。本計算工具不是評分服務、無障礙工具，也不是印刷對色儀器——它是針對 sRGB 色彩 token 的確定性 CIEDE2000 參考工具，可供您比較、記錄並隨時重新檢視。
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.
For a deeper look, see Color Difference Calculator Free No Sign Up: Quick Start.