色彩差異計算器本身不會開啟圖片;它接收兩個您已經取樣完成的不透明六位數 sRGB HEX 值,並回傳一個完全在瀏覽器中計算、符合標準的 CIEDE2000 (Delta E 2000) 數值。這個設計選擇是有意為之,因為該計算器是一個確定性的用戶端引擎,而不是圖片選擇器,所以「從圖片計算色彩差異」其實包含兩個步驟:先從圖片中取出兩個 HEX 色碼,再將它們代入計算器。當兩種顏色都輸入後,工具會將每個 sRGB 通道正規化到零到一的範圍,以 sRGB 轉換函數將其線性化,再相乘得到相乘於 D65 的 CIE XYZ,接著透過 Bradford 矩陣從 D65 適應到 D50,然後將 D50 XYZ 轉換為 CIELAB。可見的 L*、a*、b* 值會四捨五入顯示,但未經四捨五入的數值會直接餵入 CIEDE2000 公式,該公式會在接近中性色時調整 a* 軸、處理跨越零度邊界的色相角、分別對亮度、色度和色相差加權,並為藍色區域納入一個旋轉項。在預設的參數權重 kL = kC = kH = 1 下,相同的 HEX 輸入會精確回傳零,而將 A 與 B 互相比較所得的數值,等同於將 B 與 A 互相比較。
為什麼這個計算器適合圖片來源的作業流程
當有人搜尋「從圖片計算色彩差異」時,實際的工作通常屬於下列三種之一:比較從照片中取樣的兩個像素、檢查從設計稿中擷取的兩個品牌色,或驗證 UI 設計權杖與以圖片形式儲存的參考色票。色彩差異計算器正是為這項工作的後半段而設計 — 它接收兩個不透明的 HEX 值,並產生單一的 CIEDE2000 讀數。
將計算器與獨立的圖片取樣步驟(編輯器中的滴管、瀏覽器圖片選擇器,或任何會回傳六位數 HEX 的工具)搭配使用,可讓作業流程保持誠實。每個工具各司其職:圖片選擇器負責讀取像素,色彩差異計算器負責數學運算。將兩者摺疊在同一個頁面中,往往會隱藏色彩空間、不透明度假設與轉換路徑,而這些正是當數值稍後必須在 QA 審查中受到質疑時您所需要的資訊。
由於計算是在瀏覽器本地端執行,而且不會上傳任何顏色值,因此可以合理地用此計算器處理用戶端資產、內部設計稿,以及無法離開工作站的參考色票。
這個工具實際比較的內容(以及它不會做的事)
可接受的輸入刻意設得很窄:恰好兩個符合 #RRGGBB 格式的字串,用於不透明的 sRGB 顏色。三位數簡寫(例如 #abc)、帶有 Alpha 通道的值(例如 #aabbccff)、CSS 命名顏色、color() 或 display-p3() 標記法,以及任何格式錯誤的字串,在進入計算之前都會被拒絕,而不會被靜默地重新解讀。嚴格正是它的目的 — 它讓輸入的色彩空間和不透明度保持明確,使得回報的 Delta E 2000 數值意義完全等同於公式所表達的意義。
有三件工具不會做的事值得事先說明,因為它們常常成為混淆的來源:
- 它不是圖片選擇器。您無法將圖片拖曳到上面然後點選像素。
- 它不是無障礙對比檢查工具。若要進行 WCAG 風格的文字對背景可讀性檢查,請使用專門的對比比率工具。
- 它不是分光光度計或 ICC 設定檔轉換器。它無法量測真實物件、無法推論印表機設定檔,也無法認證兩個實體樣本是否會匹配。
如果是半透明的圖稿,在比較之前請將兩種顏色複合在相同的已知背景上,因為半透明的前景並非一個獨立的不透明 sRGB 顏色。
從圖片到數值差異的過程
完整的作業流程包含四個具體步驟。前三個發生在計算器之外;最後一個就是計算器本身。
- 在任何提供滴管並可回傳六位數 HEX 的編輯器或瀏覽器工具中開啟您的圖片。請記下兩個要比較顏色的精確值,包含前導的 # 符號。
- 如果任一顏色在來源檔案中為半透明,請先將其於已知背景上壓平,讓結果代表一個不透明的 sRGB 值,而非混合色。
- 將第一個 HEX 貼到計算器的第一個輸入欄,第二個 HEX 貼到第二個輸入欄。兩者都必須完全符合 #RRGGBB 格式,包含前導的井字號。
- 選擇「比較顏色」。計算器會將每個 sRGB 通道正規化到零到一,以 sRGB 轉換函數將數值線性化,再相乘得到相對於 D65 的 CIE XYZ,接著透過 Bradford 矩陣從 D65 適應到 D50,並將 D50 XYZ 轉換為 CIELAB。接著以常見的預設參數權重 kL = kC = kH = 1 執行 CIEDE2000 公式,遵循 W3C CSS Color 4 範例程式碼中所記載的轉換路徑。
結果出現後,請將兩個原始 HEX 值與回報的 Delta E 2000 數值,連同觀看或製作情境一併複製到您的 QA 紀錄中 — 正是這個情境讓數值日後能夠被重現。
在情境中解讀 CIEDE2000 結果
CIEDE2000 不只是 CIELAB 中的純歐氏距離。它會在接近中性色時調整 a* 軸、處理跨越零度邊界的色相角、分別對亮度、色度和色相差加權,並在藍色區域納入一個旋轉項。此處使用的預設權重(kL、kC、kH 皆等於 1)是生產環境工具中最常見的設定。
輸出結果的表現符合您對公式型比較的預期:
| 屬性 | 計算器中的行為 |
|---|---|
| 相同的 HEX 輸入 | 精確回傳零,僅受顯示四捨五入影響。 |
| 對稱性 | 將 A 與 B 互相比較所得的數值,等同於將 B 與 A 互相比較,惟受浮點顯示精度限制。 |
| 較大的數值 | 表示兩種顏色之間由公式定義的差異較大。 |
| 單次判定標籤 | 不會指派通用的通過或失敗門檻;其解讀取決於作業流程。 |
此頁面刻意不會將輸出標記為通過、失敗或「對每位觀察者都完全相同」。知覺會受到觀看條件、顯示器校色、環境光、表面紋理、周圍色彩以及觀察者視力等因素影響。請將此數值視為可重現的比較輔助工具,而非知覺上的最終裁決。
輸入驗證也會在計算之前執行。空值、缺少井字號、簡寫、Alpha 通道、非十六進位字元,以及多餘的數位,都會產生明確的錯誤且不會輸出結果。實作已透過 Sharma、Wu 與 Dalal 補充資料集中的八組符號敏感參考配對(Sharma 等人)進行驗證,因此對色相環繞或權重項的調整無法僅在簡單的相同色案例上過關。
這個計算器有所助益的常見作業流程
只要問題是「這兩個不透明 sRGB 顏色在數學上有多接近」,這個計算器就能順暢地融入任何環節。典型用途包括:
- 檢查樣式表修訂版本中兩個 CSS 顏色是否夠接近,足以保留為單一設計權杖。
- 將從照片中取樣的像素與預期的參考顏色進行比較。
- 以可重現的 Delta E 2000 數值記錄設計權杖變更,讓其他審查者能重新執行驗證。
- 建立可讓其他團隊成員以手動方式核對的可重複 QA 紀錄。
- 為利害關係人審查,比較從品牌色票圖片中取出的兩個 HEX 值。
若要進行文字對背景的可讀性檢查,請將本工具與獨立的 WCAG 風格對比檢查器搭配使用 — 無障礙對比與 CIEDE2000 回答的是不同的問題,兩者不可互換。若要精確重現印刷樣本或染色布料,本計算器可作為快速的初步檢查;但正式的生產簽核仍須交由在該製程所需的光源、觀察者、設定檔、基材與公差條件下運作的校色量測設備來執行。
限制與須另行驗證的事項
有幾個界線容易忘記,在將數值分享給其他人之前值得再次強調。
- 螢幕預覽並非證據。頁面上的兩個色塊提供快速的視覺參考,但螢幕呈現會受到瀏覽器、顯示器色域、色彩設定檔、亮度與校色的影響。數值運算僅使用所輸入的 sRGB 座標與記載的轉換路徑。
- 僅限不透明 sRGB。若圖片中的顏色位於透明度、漸層或另一圖層之上,計算器本身無法還原前景顏色。
- 不進行實體量測。本工具無法讀取印刷色票、油漆色卡或布料樣本。如需實體比對,請使用分光光度計,並在製程的光源與觀察者條件下進行。
- 沒有通用的公差。印刷、油漆、紡織、品牌審查、攝影與介面設計各自使用不同的儀器與驗收標準。請為您手邊的作業流程記錄自己的公差,而不是依賴單一數值。
在這些限制範圍內使用,色彩差異計算器能將一對不透明 HEX 值 — 無論它們來自圖片取樣、CSS 檔案或品牌色票 — 轉換為團隊其他人能引用的單一、可重現、符合標準的數值。