Delta E 2000 是色彩差異計算圖表在比較兩個不透明 sRGB HEX 顏色時所回傳的標準數值答案,這個值代表兩個顏色在 D50 CIELAB 色彩空間中由公式定義的距離。以 CIEDE2000 公式為基礎建置的色彩差異計算工具會讀取你的兩個六位數 HEX 輸入,分別透過 CSS Color 4 範例路徑從 sRGB 轉換到線性、再到 D65 XYZ,然後透過 Bradford 矩陣適配至 D50,最後計算出圖表所回報的單一加權差異。較大的數值代表較大的公式定義分離程度,相同的輸入永遠會回傳零,且計算是對稱的,因此交換兩個顏色在預設權重下會產生相同的結果。因此這個圖表是一個可重現的比較輔助工具:它回答的是「在 CIEDE2000 下這兩個 CSS 顏色相距多遠?」,而非「人類觀察者是否會將它們視為相同?」。感知取決於觀看條件、螢幕校準、環境光、表面質地,以及你的工作流程原本接受的容差範圍,因此最好將圖表與該數字將被使用的情境一起閱讀。

如何使用計算工具比較兩個 HEX 色
執行計算工具是一個三步驟的工作流程,會將兩個不透明 HEX 數值轉換為單一的 CIEDE2000 數字以及公式所使用的 D50 CIELAB 座標。你可以在任何現代瀏覽器中開啟 Color Difference Calculator,並每次依照相同步驟操作,這樣能讓圖表數值可追溯到一條已知的轉換流程。
- 輸入兩個不透明的六位數 sRGB HEX 顏色,包含每個前置的 #。在第一個欄位輸入第一個顏色,在第二個欄位輸入第二個顏色。預期格式必須正好是 #RRGGBB,包含井字號與六個十六進位數字。
- 選擇 Compare colors。瀏覽器會透過文件化的流程將兩個數值轉換至 D50 CIELAB,並以預設的參數權重 kL、kC 和 kH(皆等於一)計算 CIEDE2000。
- 記錄原始 HEX 數值與 Delta E 2000 結果,並附上工作流程的容差與觀看情境。儲存兩個來源 HEX 數值、數值答案,以及任何關於燈光、螢幕或生產條件的註記,以便日後能重現這個決策。
因為每個步驟都在覽器中本地執行,所以沒有任何顏色數值會被上傳到伺服器。你在螢幕上讀到的圖表,是輸入的 sRGB 座標每次執行皆透過相同轉換路徑所產生的結果,這也正是讓輸出成為一份有文件記錄的比較,而非憑空猜測的原因。
計算圖表實際繪製的內容
你所看到的單一數字是 CIEDE2000 公式的輸出結果,比 CIELAB 中單純的歐氏距離更為複雜。根據 Sharma、Wu 和 Dalal 的 CIEDE2000 實作資料,該公式會在中性色附近調整 a* 軸、處理跨越零度邊界的色相角度、分別對明度、彩度與色相差異加權,並納入一個修正藍色區域感知差異的旋轉項。計算工具使用常見的預設參數權重 kL = kC = kH = 1,這是多數色彩管理參考資料在發布容差指引時所描述的設定。
兩組可見的輔助資料會在結果面板中 Delta E 數字旁顯示。第一組是每個顏色的四捨五入後 D50 CIELAB L*、a* 與 b*,讓你能快速檢查兩個樣本在色彩空間中的位置。第二組是實際進入差異公式的未四捨五入 CIELAB 數對。由於顯示為了可讀性而做了四捨五入,四捨五入後的數字與計算結果是一致的,但並非真相來源——原始轉換結果會直接進入公式。這種區隔在 W3C CSS Color 4 範例轉換程式碼 中有文件說明,計算工具在 sRGB 至線性、D65 XYZ 以及 Bradford D50 適配階段皆遵循該規範。
就實際解讀而言,圖表在三種情境下表現是可預期的。相同的 HEX 輸入永遠會回傳零。兩個僅在明度上不同的顏色,其結果會由明度項主導,因為當色相角度幾乎不變時,旋轉項與色相加權的貢獻極小。兩個色相角度差異很大的顏色會回傳較大的數值,因為色相加權項會放大遠離中性色的差異。計算工具具有對稱性,因此在預設條件下交換顏色 A 與顏色 B 會得到相同的數字(僅受浮點顯示精度影響),且相同顏色無需進一步運算便會回傳零。將圖表視為一個可重現的數值答案——而非對感知相等性的裁決——才能讓它在截然不同的生產工作流程中保持實用。
為何計算工具只接受 #RRGGBB 輸入
輸入驗證會在計算之前執行,計算工具會拒絕任何不是正好兩個不透明六位數 sRGB HEX 數值的輸入。嚴格的輸入規則可避免隱藏的解析或合成假設改變運算結果。下表摘要說明哪些輸入會被接受、哪些會被拒絕,以及規則存在的原因,讓你能準備圖表能順利讀取且不產生錯誤的輸入。
| 輸入類型 | 是否接受? | 原因 |
|---|---|---|
| 六位數 #RRGGBB | 是 | 依規範為不透明 sRGB |
| 三位數簡寫 #RGB | 否 | 需要隱藏的展開動作;計算工具預期為完整形式 |
| 八位數含透明度的 #RRGGBBAA | 否 | 透明度會改變色彩空間;含 alpha 的 HEX 會被拒絕 |
| 具名 CSS 顏色 | 否 | 具名色不是六位數 HEX 輸入 |
| display-p3 或其他廣色域數值 | 否 | 計算工具僅比較不透明 sRGB |
| 空值、缺少井字號或非十六進位字元 | 否 | 驗證會產生明確錯誤且不會回傳結果 |
如果透明度在你的設計中很重要,文件化的變通方法是將兩個顏色在執行比較之前,先合成到同一個已知背景上,因為單獨的半透明前景本身並非單一的不透明 sRGB 色。以完全符合接受格式的方式準備輸入,才能讓圖表在多次造訪中保持可重現性。
記錄結果以便進行可重複的審查
圖表數值具有可重現性,這代表它值得被記錄下來。寫下兩個原始 HEX 數值、回報的 Delta E 2000 數字、所顯示的 D50 CIELAB 座標,以及影響該決策的觀看或生產情境。當其他人需要重新檢視這個選擇——無論是品牌審查、印刷打樣或品質檢查——這組註記就能用同一個計算工具與相同的輸入重現相同的數字。
這類註記非常適合用於記錄設計代幣(design token)的修訂、比較兩個取樣的影像顏色,或建立需要在團隊之間交接時仍可保留的品質檢查註記。實作中還納入了來自 Sharma、Wu 與 Dalal 補充資料集 的八組帶正負號的參考配對,因此色相環繞或加權項的變更無法僅靠簡單的相同案例通過。這項細節屬於計算工具內部,但在你於設計審查中信任該數字時至關重要,因為這代表圖表是依據已發表的參考數值進行檢查,而非僅以整數自我驗證。
計算工具無法取代的事物
結果旁顯示的兩個色塊是快速的視覺參考,而非色彩測量證據。瀏覽器渲染、螢幕色域、色彩設定檔、亮度與校準都可能改變色塊的視覺呈現,因此螢幕預覽最適合視為健全性檢查,而非匹配的證明。數值的 Delta E 2000 結果僅依據輸入的 sRGB 座標與文件化的轉換路徑;它無法測量實際物件、推斷印表機設定檔,也無法取代校準過的分光光度計。
針對實體生產決策——印刷、油漆配色、紡織品審查、認證的品牌色彩檢查——請使用校準過的測量設備,並搭配該流程所需的標準、光源、觀察者、基材與容差條件。針對文字可讀性與無障礙對比,請使用專門的對比比率工具搭配 WCAG AA 與 AAA 門檻,這與 CIEDE2000 是不同的計算。針對 HEX 與 RGB 之間的轉換,或圍繞基準色建立調色盤,則應使用轉換器或調色盤產生器。了解計算圖表的限制,能幫助你為下一步選擇正確的工具,而非過度信任單一數字。
如果你從某個 CSS 顏色出發,希望在比較前先看到 HEX 形式,計算工具預期輸入已是 #RRGGBB 形式;從文件化的輸入進行比較,能讓圖表輸出可追溯至已知的來源。