使用 CIEDE2000 色差計算器計算色差，意味著輸入兩個不透明的六位數 sRGB HEX 值（例如 #RRGGBB）、選擇「比較色彩」（Compare colors），然後讀取 Delta E 2000 數值，以及公式所使用的 D50 CIELAB 座標。當兩個輸入完全相同時，公式會回傳 0；當兩種顏色在其加權的明度、彩度與色相項下差異越大時，回傳的數值也越大，但它並不能證明兩個實體樣本會互相吻合。它是一個可重現的比較輔助工具，與你所提供的 sRGB 值綁定。相同的 HEX 配對必然會產生相同的小數結果；轉換會依照 CSS Color 4 範例路徑在瀏覽器本地執行；而且只接受不透明的六位數 HEX 輸入，因此簡寫、帶有 Alpha 通道、具名色彩以及 display-p3 值會在第一時間就被拒絕，而不是被默默重新解讀。這種嚴格性正是為什麼兩位設計師在工具中輸入相同的 HEX 配對時，無論何時或何地執行，都會看到相同的數值。

how do i calculate color difference when using color difference ciede2000 color difference calculator
使用 CIEDE2000 計算器計算色差

CIEDE2000 色差計算器實際上做的是什麼

CIEDE2000（常寫作 ΔE 2000 或 ΔE00）是 CIE 在 2001 年所發表的加權距離小公式，用以解決 CIELAB 一般歐氏距離 ΔE*ab 的已知缺陷。它與直接的 Lab 距離有三項不同之處：它會在中性區附近調整 a* 軸、以 kL、kC 與 kH 參數獨立加權明度、彩度與色相差異，並加入一個旋轉項，用以限制眼睛最不敏感之藍色區域中極大的色相差異。

CIEDE2000 色差計算器將該公式包裝成一個小巧且具確定性的工具。你輸入兩個 sRGB 色彩值，計算器會將每個值轉換為 D50 適配的 CIELAB 三元組，接著以常見預設值 kL 等於 kC 等於 kH 等於 1 套用 CIEDE2000，並在回報數值結果的同時，附上產生該結果的 Lab 座標。色差計算器遵循 CSS Color 4 範例轉換路徑，全程於瀏覽器中執行，因為管線中沒有任何部分會接觸遠端服務，所以對相同的輸入必然會產生相同的結果。

有兩項特性讓輸出在團隊中易於信任。該函式是對稱的，因此交換參考端與樣本端會得到相同的數字，僅受限於浮點顯示的捨入。完全相同的顏色會剛好回傳 0。正是這些特性，讓兩位協作者可以比較設計 token、QA 註記或樣本對目標的 HEX 配對，並在毫無意外的情況下達成相同的數值結論。

工具接受的輸入（以及它會拒絕的內容）

可接受的格式刻意設得很嚴格：只能是 #RRGGBB。這種嚴格的選擇正是本計算器中「什麼算是不透明 sRGB 色彩」這項約定，它同時消除了整個一整類隱藏的解析假設。

計算器會解析並進行比較的輸入：

  • 帶有井字號的六位數 HEX，例如 #1E90FF 或 #000000。
  • 大寫、小寫或混合大小寫字母：#1e90ff、#1E90FF 與 #1E90Ff 都會以相同方式解析。

在任何轉換執行之前就會產生錯誤的輸入：

  • 三位數簡寫，例如 #fff 或 #0A0。
  • 八位數帶 Alpha 通道的 HEX，例如 #1E90FFFF 或 #1E90FF80。
  • CSS 具名色彩，例如 "dodgerblue" 或 "red"。
  • display-p3、hsl()、rgb() 或任何非 HEX 運算式。
  • 缺少井字號、含有額外字元，或包含非十六進位數字的字串。
  • 任一欄位為空值。

明確的拒絕規則很重要：計算器會回傳錯誤而非結果，而不是默默重新解讀或重新合成它無法理解的輸入。嚴格的約定同時也釐清了不透明度的概念。一個不透明的 sRGB 色彩是定義明確色彩空間中的一個單點；而半透明填色並非單一獨立色彩，因為它取決於其下層的任何東西。如果你的工作流程涉及透明度，正確的處理方式是先將兩種色彩以相同的已知背景合成，再以計算器比較所產生的不透明 HEX 配對。

如何逐步計算色差

  1. 挑選你要比較的兩個 HEX 配對，並決定何者為參考端、何者為樣本端。以標準 #RRGGBB 格式記錄下來；在稍後分享結果時標註各自的角色，可避免混淆。
  2. 在瀏覽器中開啟色差計算器。由於該工具在本機執行，因此不會有任何 HEX 值離開你的裝置。
  3. 將第一個 HEX 值（含前導井字號 #）輸入或貼上到第一個輸入欄位。確認六位數皆已輸入，且字串僅包含 0–9 與 A–F（或 a–f）。
  4. 將第二個 HEX 值（含前導井字號 #）輸入或貼上到第二個輸入欄位。套用相同的驗證規則。
  5. 選擇「比較色彩」（Compare colors）。計算器會解析兩個輸入、套用 CSS Color 4 轉換路徑，並產生一塊輸出結果：原始 HEX 值、各色彩的 D50 CIELAB 三元組（已為顯示而捨入），以及 kL 等於 kC 等於 kH 等於 1 的 Delta E 2000 數值。
  6. 記錄結果。寫下兩個 HEX 值、兩個 D50 Lab 三元組、所報告的 ΔE 2000 數值，以及關於檢視或生產情境的註記——螢幕設定檔、環境光、目標材質或工作流程容差——以便他人日後能重現這項決策。

若任一欄位觸發輸入錯誤，請修正有問題的字串——最常見的情況是補上前導井字號、將簡寫展開為六位數，或移除 Alpha 通道——然後重新執行比較。以修正後的輸入再次執行時，將會覆寫第一次嘗試所造成的任何部分狀態。

計算器在背景中執行的轉換路徑

了解這條路徑很有用，因為相同的輸入必然會產生相同的輸出。瀏覽器會將每個 #RRGGBB 字串解析為 sRGB 空間中的三個整數通道。每個通道會被正規化至 0 到 1 的範圍，再以 sRGB 轉換函式線性化，使編碼值中一單位的增加對應於物理亮度上的固定增加。三個線性 sRGB 通道接著會使用標準的 sRGB 對 XYZ 矩陣，轉換為相對於 D65 參考白的 CIE XYZ。

由於 CIELAB 慣例上是相對於 D50 來定義，計算器會套用 Bradford 色適應矩陣，從 D65 XYZ 轉換到 D50 XYZ，再透過標準的非線性 L*、a*、b* 公式，將 D50 適配的 XYZ 三元組轉換為 CIELAB。這是 W3C 的 CSS Color 4 color conversion code 中所記載的路徑，可見的 Lab 數字會為顯示而捨入，而未捨入的值則會繼續進入差異計算步驟。

接著 CIEDE2000 會以 kL 等於 kC 等於 kH 等於 1，對兩個 D50 Lab 三元組執行。它會計算加權的明度差、彩度加權的彩度差、能處理零度邊界的色相加權色相差，以及一個會微調藍色區域樣本的旋轉項；這四個分量會合併為單一的 ΔE 2000 數值。這些相同的預設值會與 Sharma、Wu 與 Dalal 的 CIEDE2000 implementation 工作中所整理的八組參考 Lab 配對進行交叉比對，這代表色相迴圈或校準處理中的隱藏回歸，無法僅靠明顯的相同案例通過測試。

讀取 Lab 座標與 Delta E 2000 結果

在「比較色彩」執行後，頁面會對每一組配對呈現四項資訊：你輸入到各欄位的原始 HEX 字串、一個作為快速視覺參考的小色塊、兩組各色彩的 CIELAB 三元組（L*、a*、b*），已為顯示而捨入並使用計算所用的 D50 白點，以及兩個色彩共用的一個 Delta E 2000 數值。

有幾點詮釋上的注意事項。相同的 HEX 配對會剛好回傳 0。較大的數字表示公式定義上的差異更大，但該數值並不對應到通用的通過或不通過門檻，因為知覺取決於檢視條件、顯示器校準、環境光、表面紋理、相鄰色彩、觀察者的視力，以及特定工作流程所選擇的容差。兩個色塊只是視覺上的提示，並非色彩計量證據：相同的 HEX 配對在不同的瀏覽器、螢幕色域、色彩設定檔與亮度設定下，可能會呈現出不同的結果。

數值 ΔE 2000 是確定性的。它只取決於你所輸入的兩個 HEX 字串以及已記載的轉換路徑。它並非測量實體物件、無法推論印表機設定檔，也不會補償基材的變化。應將其視為可重現的比較輔助，而非在任何特定生產製程中保證兩個實體樣本會互相吻合。

這個數字何時有幫助、何時沒有

當工作流程中兩人對輸入達成共識，且無論何時或何地執行都需要得到相同的數值答案時，這個工具便能契合。下表摘要說明了 ΔE 2000 數值在哪些情境中能增添價值、在哪些情境中則力有未逮。

工作流程ΔE 2000 為何有幫助為何有所不足
記載設計 token 的修訂相同的 HEX 輸入，相同的數值輸出；任何人都能於日後重新推導。無法捕捉該 token 在實際螢幕上的呈現效果。
比較取樣影像中的色彩兩個 HEX 配對之間可重現的數值檢查。無法直接從上傳的影像中取樣像素。
建立可重複的 QA 註記在不同的執行與裝置間皆為對稱且確定性。Lab 值假設為單一參考白與單一觀察者。
驗證印刷或油漆的吻合度數學上接近的樣本仍會顯示出較低的 ΔE。實體基材需要經過校準的儀器與製程容差。
無障礙對比檢查ΔE 是一種知覺公式，並非 WCAG 對比比率。請改用專門的對比比率工具。
測量半透明填色輸入約定會拒絕帶有 Alpha 通道的 HEX。請先以已知背景進行合成，再進行比較。

對於文字可讀性而言，正確的工具是 WCAG 對比檢查器。對於實體生產決策，正確的工具則是搭配你的製程所指定之光源、觀察者、設定檔、基材與容差，經過校準的分光光度計。

Recording the Result for a Reproducible Decision

The numeric value on its own is only half of a useful record. To reproduce the comparison later, capture five pieces of information together: both HEX inputs copied verbatim from the calculator output, both D50 CIELAB triples displayed on the page, the ΔE 2000 number returned by the calculator, the viewing or production context (monitor profile, ambient light, color checker if used, and the substrate or surface for physical work), and the tolerance applied to the workflow — the ΔE 2000 ceiling your team treats as acceptable for brand review, packaging, or interface design.

A short note that ties those five elements together is usually enough to let a teammate reach the same decision next quarter. The calculator itself is silent about tolerance — that judgment belongs to the workflow — but it gives you a stable, defensible number to argue against.

If a workflow requires transparency, multi-channel, or named-color inputs, the input contract will reject them by design. Composite over a known background first, or convert to opaque sRGB HEX upstream, before relying on the calculator for the final comparison. For tasks outside the tool's scope — picking a palette, mixing two colors, or rendering a CSS gradient — the rest of the color toolbox is better suited to those jobs.