數值化比較兩種顏色的做法,是把兩個 HEX 值都轉換成 D50 CIELAB 座標,再代入 CIEDE2000 公式,輸出一個稱為 Delta E 2000 的單一差異數值。這個公式會在中性灰附近調整 CIELAB 的 a 軸,分別為明度、彩度與色相差加權,並加入一個旋轉項,修正舊版 Delta E 在藍色區域的已知弱點。在 kL、kC、kH 三個預設權重都等於 1 的情況下,計算具有對稱性:以 A 對 B 與以 B 對 A 比較,結果在浮點顯示精度範圍內會一致。相同的輸入永遠回傳 0,而較大的數字代表兩個顏色座標之間依公式定義的距離較大。Color Difference Calculator 正是針對你貼上的兩個不透明六位數 sRGB HEX 值執行這條轉換路徑,於瀏覽器中計算數學,並在輸出 Delta E 2000 數值的同時,一併列出產生該數值的 D50 CIELAB 座標。所有過程都在你的裝置上完成,任何階段都不會上傳任何顏色值。

「比較兩種顏色」真正的含義
把兩個色塊並排放在螢幕上雖然能進行視覺比較,但那個畫面會受到你正在觀看的螢幕、室內亮度,以及眼睛解讀相鄰顏色方式的影響。數值比較的方式則不同:兩個 HEX 值會走過一條固定的轉換路徑,被推入一個感知色彩空間,再由單一公式回傳一個可重現的距離數字。這個數字就是你在計算工具中看到的 Delta E 2000 輸出,無論在哪個裝置、哪個瀏覽器,只要輸入相同的兩個值,結果都會相同。
CIELAB 色彩空間的設計,是讓相等的數值步進大致對應一般人類觀察者感知上的等量步進。CIEDE2000 承襲這個概念,但修正了早期 Delta E 版本遺留的若干扭曲。Sharma、Wu 與 Dalal 發表這套公式的論文,分別為明度、彩度與色相差加權,加入了針對色彩空間藍色區域的旋轉項,並處理跨過零度邊界的色相角。計算工具採用的實作遵循該論文,並以補充資料集中八組對正負號敏感的代表配對進行驗證,這代表它並非只是正確處理恆等情形。
從公式的設計可以得出兩個實際結論。第一,計算是確定性且對稱的:同一組配對不論順序如何,所得的數字都相同,差異僅來自浮點顯示精度。第二,這個數字只有在搭配觀看條件以及針對工作流程選用的容差時才具有意義。Delta E 2000 等於 3 在品牌審查中可能通過,在紡織品品管檢驗中卻可能不通過,端視各領域適用的標準而定。
計算工具會接受與不會接受的輸入
計算工具刻意採用嚴格的輸入格式,確保色彩空間與不透明度始終明確。兩個 HEX 值都必須包含前置井字號、十六進位六位數,且不能帶有 alpha 通道。任何不符的輸入都會在執行任何轉換之前觸發驗證錯誤,這樣比較結果才能單獨依據輸入重現。
| 格式 | 範例 | 是否接受 |
|---|---|---|
| 不透明六位數 HEX | #1F6FEB | 是 |
| 三位數縮寫 | #1AB | 否 |
| 含 alpha 的八位數 HEX | #1F6FEB80 | 否 |
| CSS 具名顏色 | crimson | 否 |
| display-p3 值 | color(display-p3 0.1 0.4 0.9) | 否 |
| 空字串或缺少井字號 | 1F6FEB | 否 |
拒絕這些格式不是限制,而是為了把關。三位數縮寫、帶 alpha 的 HEX,以及具名顏色,全都隱含一個會改變比較意義的剖析或合成決策。如果透明度對你的專案很重要,正確的替代方式是先將每個半透明顏色合成到同一個已知背景上再行比較,因為半透明的前景並不是一個獨立的不透明 sRGB 顏色,而計算工具也無法替你推算缺失的背景。
在瀏覽器中執行 HEX 到 Delta E 的比較
- 在最新的桌面或行動瀏覽器中開啟 Color Difference Calculator。不需要帳號、擴充功能或下載即可開始。
- 將第一個顏色以六位數 HEX 值並加上前置井字號的形式,例如 #1F6FEB,輸入第一個輸入欄位。
- 將第二個顏色以相同方式輸入第二個欄位,例如 #0B5ED7。
- 選擇 Compare colors,於瀏覽器中對這兩個值執行本地轉換與 CIEDE2000 計算。
- 閱讀顯示在兩個色塊旁的 Delta E 2000 結果,以及用於各顏色的 D50 CIELAB 座標(L*、a*、b*)。
- 複製原始 HEX 值、Delta E 2000 數字,以及適用於你工作流程的容差或觀看情境,日後任何審核結果的人都能重現這次比較。
如果你想要一份為首次使用者撰寫的逐步導引,Color Difference Calculator for Beginners: HEX to Delta E 指南會把同樣的流程拆解成淺白的步驟,並說明輸出中每個欄位的意義。
從 HEX 到 Delta E 2000 的轉換路徑內部
這條轉換遵循 W3C CSS Color 4 規格中描述的範例路徑。每個步驟都是固定的,且在瀏覽器中執行,因此只要輸入相同的兩個 HEX,比較結果即可重現。
| 階段 | 執行內容 |
|---|---|
| 1. 剖析 | 兩個不透明 #RRGGBB HEX 值被剖析為 sRGB 下的整數紅、綠、藍通道。 |
| 2. 線性化 | 每個 sRGB 通道被正規化到 0–1 範圍,並通過 sRGB 轉換函式以移除 gamma 編碼。 |
| 3. D65 XYZ | 線性 sRGB 乘上標準的 sRGB-to-XYZ 矩陣,產生相對於 D65 光源的 CIE XYZ。 |
| 4. D50 適應 | D65 XYZ 透過 Bradford 色適應矩陣適應至 D50。 |
| 5. CIELAB | D50 XYZ 轉換為 CIELAB。顯示值四捨五入以利閱讀,未捨入的數值則送往下一步。 |
| 6. CIEDE2000 | 兩組 CIELAB 配對在 kL、kC、kH 各等於 1 的設定下,代入 CIEDE2000 公式,回傳 Delta E 2000 數字。 |
驗證並不止於輸入欄位。實作會以 Sharma、Wu 與 Dalal 補充資料集中八組對正負號敏感的代表配對進行驗證,因此未來若對色相環繞或加權項進行任何修改,都會讓驗證失敗,而非在簡單的恆等情形下默默通過。
帶著情境解讀 Delta E 2000 數字
Delta E 2000 數字可以重現,但它本身並不附帶一個通用的通過或未通過標籤。計算工具刻意不為任何固定數值貼上「相同」、「可接受」或「被拒絕」的標籤,因為感知會受到觀看條件、顯示器校色、環境光、表面紋理、周圍顏色、觀察者視覺,以及針對工作流程選用的容差所影響。
這個數字真正提供的是一個可比較的參考。兩組在相同比較設定下 Delta E 2000 相近的顏色配對,在同一個校色過的顯示器上看起來會有相近的差異程度。這讓這個數值在記錄設計標記修訂、抽樣影像色彩的品管註記,以及調色盤版本之間的可重現比較時相當實用。記錄兩個 HEX 值、回報的數字,以及工作流程情境,才能把單一次的計算轉變為日後他人可以驗證的東西。
不同領域適用不同的驗收上限。品牌審查、攝影、油漆、紡織品、印刷以及介面設計,各自可能採用不同的儀器與容差。請將這個計算工具的輸出視為一個能嵌入你自己品管流程的可重現比較輔助,而非取代該流程的工具。
這個結果無法證明的事
頁面上的兩個色塊提供快速的視覺參考,但螢幕預覽並不是色彩量測的證據。瀏覽器渲染、螢幕色域、色彩描述檔、亮度與校色,全都會改變色塊的視覺呈現。數值計算僅依據輸入的 sRGB 座標與記載的轉換路徑,因此它無法量測實體物件,也無法從這些數字推算印刷機描述檔。
這個區別在印刷與製造領域尤其重要。要證明兩個實體樣本相符,需要使用經過校色的儀器,並採用符合製程的光源、觀察者、描述檔、基材與容差條件。計算工具會告訴你兩個 HEX 值在 CIELAB 空間中有多接近,但它無法告訴你顏料、布料或印刷實務上會如何重現這兩個顏色。
這個工具也不是影像選擇器、分光光度計、ICC 描述檔轉換器、無障礙對比檢查器或認證服務。若要評估文字可讀性,請使用會回報 WCAG 比率的對比工具;若要做實體製造決策,請使用你的製程本身已經要求的儀器與標準。
若想深入了解,請參閱 Delta E Calculator: A Standards-Based CIEDE2000 Walkthrough。