Color Difference Calculator（色差計算工具）本身不會開啟圖片；它接收兩個你已經取樣好的不透明六位數 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 完全相同的數字。

color difference calculator from image
從圖片計算色差：取樣、比較

為什麼這個計算工具適合以圖片為來源的工作流程

當有人搜尋「從圖片計算色差」時，實際的工作多半屬於以下三種：比較從照片中取樣的兩個像素、檢查從設計稿中擷取的兩個品牌顏色，或將 UI token 與以圖片形式保存的參考色票進行驗證。Color Difference Calculator 是為上述工作的後半段所設計——它接受兩個不透明的 HEX 值，並產生單一的 CIEDE2000 讀值。

把這個計算工具與一個獨立的圖片取樣步驟搭配使用（無論是編輯器中的滴管、瀏覽器的圖片挑選器，或是任何會回傳六位數 HEX 的工具），才能讓工作流程保持誠實。每個工具各司其職：圖片挑選器負責讀取像素，色差計算工具負責數學計算。把兩者合併到同一個頁面往往會隱藏色彩空間、不透明度假設與轉換路徑，而這些正是稍後在 QA 審查中需要為這個數字辯護時所必須掌握的資訊。

由於計算完全在瀏覽器本地執行，不會上傳任何顏色值，因此可合理地用於客戶端的素材、內部設計稿，以及不能離開工作站的參考色票。

這個工具實際比較的內容（以及它不做什麼）

可接受的輸入刻意設定得很嚴格：剛好兩個格式為 #RRGGBB 的字串，代表不透明的 sRGB 顏色。三位數的簡寫（例如 #abc）、帶有 alpha 通道的值（例如 #aabbccff）、CSS 命名顏色、color() 或 display-p3() 標記法，以及任何格式錯誤的字串，都會在計算之前被拒絕，而不會被靜默地重新解讀。這種嚴格正是重點——它讓輸入的色彩空間與不透明度保持明確，因此所回報的 Delta E 2000 就是公式本身所代表的意義。

有三件這個工具不做的事值得先說清楚，因為它們經常會引起混淆：

  • 它不是圖片挑選器。你不能把圖片拖進去並點選像素。
  • 它不是無障礙對比檢查器。若要做 WCAG 風格的文字與背景可讀性檢測，請使用專門的對比比率工具。
  • 它不是分光光度計，也不是 ICC 設定檔轉換器。它無法量測真實物件、無法推導印表機設定檔，也無法認證兩個實體樣本會相符。

如果是半透明的圖稿，請先在相同的已知背景上將兩種顏色合成之後再進行比較，因為半透明的前景顏色並不是單一獨立的不透明 sRGB 顏色。

從圖片到數值差異

完整的工作流程包含四個具體步驟。前三個步驟在計算工具之外完成；最後一個步驟才是計算工具本身。

  1. 在任何有提供滴管工具並會回傳六位數 HEX 的編輯器或瀏覽器工具中開啟你的圖片。請記下你想比較的兩種顏色的精確數值，記得包含前導的 #。
  2. 如果任一顏色在來源檔案中為半透明，請先將其在一個已知背景上壓平，讓結果代表一個不透明的 sRGB 數值，而不是一個混合色。
  3. 將第一個 HEX 貼到計算工具的第一個輸入欄，第二個 HEX 貼到第二個輸入欄。兩者都必須完全符合 #RRGGBB 的格式，包含前導的井字號。
  4. 選擇 Compare colors（比較顏色）。計算工具會將每個 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 都等於一）也是生產環境工具中最常見的設定。

其輸出行為與你對一個公式式比較的預期一致：

特性在計算工具中的行為
相同的 HEX 輸入在顯示捨入範圍內，剛好回傳零。
對稱性比較 A 與 B 會得到與比較 B 與 A 相同的數字，但會受限於浮點數的顯示精度。
數值愈大表示兩個顏色之間由公式定義的差異愈大。
單次標籤不會指派一個通用的通過或不通過門檻；其解讀取決於工作流程。

這個頁面刻意不會在輸出上蓋上「通過」、「不通過」或「對所有觀察者都相同」的戳章。感知會受到觀看條件、顯示器校準、環境光、表面紋理、周圍顏色與觀察者視力的影響。請把這個數字視為可重現的比較輔助，而非知覺上的最終判決。

輸入驗證同樣會在計算之前執行。空值、缺少井字號、簡寫、alpha 通道、非十六進位字元，以及多餘的數字都會產生明確的錯誤，且不會給出結果。實作內容已針對 Sharma、Wu 與 Dalal 補充資料集中的八組符號敏感參考對進行過驗證（Sharma et al.），因此色相環繞或加權項目的調整不可能僅在簡單的相同色案例上過關。

這個計算工具派上用場的常見工作流程

凡是問題本質是「這兩個不透明的 sRGB 顏色在數學上有多接近？」，這個計算工具都能乾淨俐落地切入。常見的用途包括：

  • 檢查樣式表修訂版本中的兩個 CSS 顏色是否足夠接近，可以保留為單一 token。
  • 將從照片中取樣的像素與預期的參考顏色進行比較。
  • 為設計 token 的變更記錄一個可重現的 Delta E 2000 數字，讓另一位審查者能夠重新執行。
  • 建立可重複的 QA 筆記，讓另一位團隊成員能夠親手驗證。
  • 在利害關係人審查中，比較從品牌色票圖片中取出的兩個 HEX 值。

針對文字與背景的可讀性，請將本工具與獨立的 WCAG 風格對比檢查器搭配使用——無障礙對比與 CIEDE2000 回答的是不同問題，兩者不能互換。對於印刷樣本或染色布料的精確重現，這個計算工具是快速的初審；正式的生產放行仍須交由在該製程所需的光源、觀察者、設定檔、基材與公差條件下運作的校驗量測設備。

限制與需要另外驗證的事項

有幾個容易遺忘的界線，在把數字分享給其他人之前值得再次強調。

  • 螢幕預覽不是證據。頁面上的兩個色塊提供快速的視覺參考，但螢幕呈現會受到瀏覽器、螢幕色域、色彩設定檔、亮度與校準的影響。數值計算僅使用輸入的 sRGB 座標與記載的轉換路徑。
  • 僅限不透明 sRGB。如果影像中的顏色疊在透明度、漸層或另一個圖層之上，計算工具本身無法自行還原前景顏色。
  • 不做實體量測。這個工具無法讀取印刷色票、漆片或布料樣本。實體比對請在製程光源與觀察者下使用分光光度計。
  • 沒有通用公差。印刷、塗料、紡織、品牌審查、攝影與介面設計各自使用不同的儀器與驗收界限。請為當下的工作流程記錄你自己的公差，而不是依賴單一數字。

在這些限制之內使用，Color Difference Calculator 能把一對不透明的 HEX 值——無論來自影像取樣、CSS 檔案或品牌色票——轉成一個團隊其他人可以引用的單一、可重現、符合標準的數字。

如需更深入的探討，請參閱 平均顏色工具會讓圖片離開我的裝置嗎？。

如需更深入的探討，請參閱 在 Android 上計算色差：無需安裝 App。