CIEDE2000 是用來計算 Delta E 2000 值的公式，該值概述了兩個以 CIELAB 表示之顏色之間的知覺差異；而一個專為 CSS 程式碼打造的顏色差異計算工具則會對兩個以井字號開頭輸入的不透明 sRGB HEX 值套用該公式。此工具僅接受兩個六位數的 #RRGGBB 字串，依循 CSS Color 4 的轉換路徑，從 sRGB 轉換至線性光，再以 D65 為基準乘入 CIE XYZ，接著透過 Bradford 矩陣將該 XYZ 由 D65 適配至 D50，再轉換為 CIELAB，最後以常見的預設參數權重 kL、kC 與 kH 皆設為 1 來計算 CIEDE2000。其結果是一個單一的對稱數值，用來描述這兩個輸入顏色在該公式之顏色差異量表上的距離。完全相同的顏色必定回傳零，而數值愈大代表計算出的差異愈大。所有運算皆在瀏覽器中完成，輸入的 HEX 字串絕不會被上傳，且實作為針對 Sharma、Wu 與 Dalal 資料集中八組對正負號敏感之參考配對進行驗證，以確保色相繞迴與權重調整並非僅在簡單的相等案例上通過。
計算工具接受哪些 CSS 顏色碼
CSS 提供多種撰寫顏色的方式，而本計算工具刻意將入口限縮為僅有一種。僅接受不透明的六位數 #RRGGBB 字串，內部的六個字元中字母與數字皆為必要，且必須以井字號開頭。三位數的簡寫（例如 #fff）、四位數與八位數含透明度的 HEX（例如 #ff0000ff）、命名關鍵字（例如 cornflowerblue）、寫於 color() 函式內的 display-p3 值，以及任何格式錯誤的輸入，皆會在任何運算執行之前明確地產生錯誤。
| 輸入格式 | 範例 | 是否接受？ |
|---|---|---|
| 六位數不透明 HEX | #4A90E2 | 是 |
| 三位數簡寫 | #4A9 | 否 |
| 含透明度 HEX | #4A90E2FF | 否 |
| CSS 命名顏色 | cornflowerblue | 否 |
| display-p3 函式 | color(display-p3 0.3 0.6 1) | 否 |
| 格式錯誤字串 | 4A90E2（無井字號） | 否 |
如此嚴格的輸入格式並非疏漏。拒絕簡寫、透明度、命名顏色以及其他色彩空間，可避免計算工具在多套解析規則間悄悄擇一採用，進而維持輸入色彩空間與不透明度的明確性。若工作流程中需要透明度，正確的做法是先將兩個 HEX 值在同一個已知背景上進行合成，再將合成後的不透明結果輸入工具。半透明的前景本身並非單一獨立的 sRGB 顏色，因此本工具不會嘗試猜測應採用何種背景。
CIEDE2000 計算如何在本地端執行
當你按下 Compare colors 時，瀏覽器會執行 W3C 為 CSS Color 4 範例轉換程式碼 所記載的同一條轉換路徑。每一個 sRGB 色道位元組會先被正規化為介於零與一之間的數值，接著以 sRGB 轉移函式進行線性化，再以 D65 光源為基準乘入 sRGB 對 XYZ 矩陣以得到 CIE XYZ。接著透過 Bradford 色覺適應矩陣將該 XYZ 由 D65 適配至 D50，使最終得到的 Lab 值落在 CIEDE2000 所預期的同一條中性軸上。經 D50 適配後的 CIELAB 座標會被四捨五入以供顯示，而未經四捨五入的版本則會繼續進入差異公式的運算。
CIEDE2000 比 Lab 空間中的純歐氏距離更為複雜。它會在中性色附近調整 CIELAB 的 a* 軸，以避免較舊 Delta E 公式中出現的藍色區域失真；處理跨越零度邊界的色相角度；對明度、色度與色相差異分別套用不同的權重；並納入專門針對藍色區域的旋轉項。本實作採用常見的預設參數權重 kL、kC 與 kH 皆為 1，這也符合 Sharma 參考資料集所定義的條件。
在相同的預設條件下，此數值具有對稱性：以色彩 A 對色彩 B 進行比較所得到的結果，與以 B 對 A 進行比較的結果相同，僅在浮點數顯示精度上可能略有差異。驗證機制已內建於計算工具本身；實作中收錄了 Sharma、Wu 與 Dalal 補充資料集中的八組對正負號敏感之參考配對，因此任何對色相繞迴或權重項的調整皆無法僅在簡單的相等案例上蒙混過關。欲檢視參考運算細節的讀者可前往 Sharma CIEDE2000 實作說明。
三步驟比較兩個 CSS 顏色碼
以下為從兩個 CSS 顏色碼取得 Delta E 2000 數值的最短路徑。
- 輸入兩個不透明的六位數 sRGB HEX 顏色，並包含各個開頭的 #。將第一個值貼上或輸入到左側欄位，第二個輸入到右側欄位。兩者皆必須為完整的 #RRGGBB，不可包含空白、不可為簡寫，亦不可在末端附加透明度。
- 選擇 Compare colors。瀏覽器會依序透過 sRGB 至線性光、D65 XYZ、Bradford D50 適配以及 CIELAB 等步驟對兩個值進行轉換，再以 kL = kC = kH = 1 計算 CIEDE2000。
- 記錄原始的 HEX 值、Delta E 2000 的結果以及你的檢視情境。請將兩個 HEX 字串連同數值結果一併記下，並簡要說明將採用此決策的工作流程，例如設計權杖審查、漸層停駐點微調、品管驗收或取樣影像比較。
若任一輸入未通過驗證，工具會在執行運算之前先行中止，並顯示明確的錯誤訊息，而非回傳一個誤導性的數值。空值、缺少井字號、三字元簡寫、八字元含透明度的 HEX、非十六進位字元以及多餘的數字，皆會觸發該明確的錯誤路徑。關於本計算工具的相關逐步說明，以圖表方式判讀 Delta E 2000的指南可與本工作流程相互搭配閱讀。
判讀 D50 CIELAB 座標
除了 Delta E 2000 分數之外，計算工具也會顯示每個顏色經 D50 適配後的 CIELAB 值：L* 為介於零到一百的知覺明度、a* 為綠至紅的對立軸、b* 為藍至黃的對立軸。這三個數值正是 CIEDE2000 實際進行比較的輸入；在結果中看見它們，有助於理解為何兩個相近的 HEX 配對會在某個方向上產生分歧。
舉例而言，兩組 L* 相同但 a* 與 b* 相異的配對，與兩組 a* 與 b* 相同但 L* 差距甚大的配對，兩者所產生的 Delta E 數值可能並不相同，這是因為 CIEDE2000 在公式中對明度、色度與色相分別套用了不同的權重項。可見的 Lab 值會被四捨五入以供顯示，而未經四捨五入的數值則會繼續進入差異公式的運算，因此你所看見的表格僅供說明，而你實際看到的分數則是由完整精度的運算所產生。
顏色差異計算工具的適用情境
一個基於標準的顏色差異計算工具可順暢地融入若干反覆出現的 CSS 與設計工作流程。設計師可藉此記錄某次設計權杖的修訂是否使品牌色偏移至需要利害關係人核准的程度。前端工程師可藉此確認 CSS 漸層中的兩個十六進位停駐點在數學上是否足夠接近，以落在同一個知覺區間內。品管團隊可藉此將擷取自螢幕截圖的顏色與原始 CSS 來源進行比對。研究人員與無障礙顧問則可將其作為對比度工具的數值輔助，用於記錄顏色決策。
| 使用情境 | 此工具能做什麼 | 此工具無法做什麼 |
|---|---|---|
| 設計權杖修訂 | 量化新舊 HEX 值之間的知覺差距 | 決定是否核准品牌再造 |
| 漸層停駐點檢查 | 確認兩個 HEX 停駐點落在目標 CIEDE2000 區間內 | 在螢幕上實際渲染該漸層 |
| 與來源進行品管比對 | 將取樣 HEX 與原始 CSS 值進行比對 | 捕捉所有顯示器校色上的差異 |
| 驗收容差 | 回傳一個可重現的數值作為紀錄 | 取代工作流程所特有的容差標準 |
該表格中的每一列皆指向同一個結論：運用此工具為顏色決策賦予一個站得住腳的數值，再於其上套用你自己的工作流程容差。任何特定配對的確切數值皆須透過執行計算工具取得，而非來自固定的對照表。
Delta E 2000 能證明與不能證明的事
計算工具所產生的數值，是對你所輸入之兩個 sRGB 座標所進行的公式化比較，僅此而已。它是一項用於文件紀錄的可重現輔助工具，並不保證兩個實體樣本在所有檢視條件下都會相符。視覺感知取決於檢視設置、環境光源、表面質地、周圍色彩以及個別觀察者，而可接受的容差在印刷、塗料、紡織、品牌審查、攝影以及介面設計等領域之間差異極大。
輸入欄位旁所顯示的兩個螢幕色塊僅供快速視覺參考，並非色彩計量學的證據。瀏覽器渲染、螢幕色域、色彩設定檔、亮度以及校色狀態皆可能改變這些色塊的視覺呈現，卻不會改變其底層運算。數值計算僅依據你所輸入的 sRGB 座標以及文件化的 CSS Color 4 轉換路徑，因此它無法量測實體物件，亦無法推斷印表機設定檔。
若要評估文字在背景上的可讀性，請使用遵循 WCAG 相對亮度公式的專用對比度工具。若涉及實體製造決策，則請使用經校正的量測儀器，並依循該製程所要求的標準、光源、觀察者、基材以及容差條件。請將此計算工具視為一項確定性的用戶端輔助工具，在你自己的瀏覽器中，針對同一組兩個 HEX 值，每次都會回傳相同的 Delta E 2000 數值。
若想進一步了解，請參閱漸層調色盤：以視覺方式建立並複製 CSS。