Delta E 2000 值是兩個 CIELAB 顏色之間由公式定義的數值距離,回傳為單一數字,其中零代表完全相同,較大的數值代表計算出的差異越大。色彩差異計算工具會比較兩個不透明的 sRGB HEX 顏色,透過有完整文件記載的轉換路徑處理它們,並在旁邊印出 Delta E 2000 的結果以及數學運算中所使用的 D50 適應 Lab 座標。色彩差異計算工具正是如此運作,完全在瀏覽器本地端執行,使用 W3C CSS Color 4 範例轉換以及 Sharma 的參考資料集來驗證實作正確性。由於結果是可重現的比較而非感知上的裁決,你輸入顏色的方式、詮釋數字的方式,以及記錄脈絡的方式,決定了這個答案是否有用或是否會誤導。這個工具不是兩個實體樣本一定會匹配的保證、不是對視覺外觀的裁決,也不是校準過的量測設備的替代品——它是一個數學程序,擁有狹窄且明確的輸入格式和單一數值輸出。下方的技巧涵蓋了讓計算保持誠實的小習慣,以及那些悄悄讓結果失效的常見錯誤。

color difference calculator tips and common mistakes
色彩差異計算工具的使用技巧與避免常見錯誤

色彩差異計算工具實際量測的是什麼

這個工具接收兩個以六位數 HEX 撰寫的不透明 sRGB 顏色,將每個通道轉換為線性光源,將結果乘以相對於 D65 的 CIE XYZ,使用 Bradford 矩陣從 D65 適應到 D50,最終進入 CIELAB。一旦兩個顏色都以 Lab 三元組形式存在,它就會以預設的參數權重 kL、kC 和 kH(皆等於 1)執行 CIEDE2000 公式。輸出是一個 Delta E 2000 數字、餵入數學運算的兩個 D50 CIELAB 三元組,以及你輸入的原始 HEX 值。一切都在本地端進行,因此不會上傳任何顏色值。

CIEDE2000 比 Lab 中的純歐氏距離更為複雜。它會在中性色附近調整 a 軸,處理跨越零度邊界的色相角,分別為明度、彩度和色相的差異加權,並在藍色區域加入一個旋轉項,以修正純 Lab 距離在色彩空間該部分的一個知名不準確性。實作會透過 Sharma、Wu 和 Dalal 補充資料集中的八組對符號敏感的參考配對來檢查,因此對色相環繞或加權項目的更動無法僅靠平凡的相同色案例通過驗證。你可以在 Sharma CIEDE2000 實作資料頁面上閱讀更多用於驗證數學運算的測試集的相關資訊。

有幾個特性直接來自公式與轉換路徑。相同的輸入會回傳剛好為零的結果。交換顏色 A 與顏色 B 會得到相同的數字,僅受限於浮點數顯示精度。較大的數字代表較大的公式定義差異——但這個頁面刻意不會將任何固定數值標示為通過、失敗、對每位觀察者都完全相同,或是對每個生產流程都可接受。感知取決於觀看條件、顯示器校準、環境光源、表面紋理、周圍顏色和觀察者的視覺,而這些都不在數學運算之內。

逐步執行可靠的比較

一旦你的兩個 HEX 值準備就緒,整個工作流程可在不到一分鐘內完成。操作的順序很重要,因為驗證發生在計算之前,任何格式錯誤的輸入會直接短路為明確的錯誤,而不是悄悄產生錯誤的答案。

  1. 在任何現代瀏覽器中開啟色彩差異計算工具。
  2. 將第一個不透明的六位數 sRGB HEX 顏色(含開頭的 #)輸入到第一個欄位中。範例:#1f6feb。
  3. 將第二個不透明的六位數 sRGB HEX 顏色以相同方式輸入到第二個欄位。範例:#2f7ff5。
  4. 選擇比較顏色以觸發 sRGB 轉線性、D65 XYZ、Bradford D50 適應、CIELAB 轉換與 CIEDE2000 計算。
  5. 讀取 Delta E 2000 數字以及印在色塊下方的每個 D50 CIELAB 座標(L*、a*、b*)。顯示的 Lab 值已四捨五入以利閱讀;未四捨五入的數字會繼續進入差異公式運算。
  6. 記錄兩個原始 HEX 值、回報的 Delta E 2000 數字,以及觀看或生產脈絡——顯示器或印刷、光源、觀察者、容差——以便他人日後能重現這個決定。

會讓結果失真的常見輸入錯誤

大多數「錯誤」的結果並非公式錯誤,而是事先就發生的輸入錯誤。計算工具會以明確的錯誤訊息拒絕格式錯誤的輸入,而不是默默地重新詮釋它,這能保護你免於意外的比較——但前提是你理解什麼算作格式錯誤。可接受的格式刻意設得很窄:剛好是 #RRGGBB。任何其他格式都會產生錯誤且沒有結果。

輸入錯誤你輸入的內容工具的反應
缺少開頭的 # 符號1f6feb拒絕——產生明確的錯誤
三位數簡寫#1f6拒絕——簡寫不會被標準化
帶有 Alpha 通道的 HEX#1f6feb80拒絕——僅接受不透明的 #RRGGBB
具名顏色關鍵字cornflowerblue拒絕——關鍵字不會被解析
非十六進位字元#1f6ghi拒絕——通道必須介於 00–FF
display-p3 數值color(display-p3 0.1 0.4 0.9)拒絕——僅接受 sRGB HEX
半透明前景在背景上具有 alpha 通道的顏色無法獨立處理——請先在已知背景上進行合成

如果你擁有上述任何一種格式,請在執行比較之前先進行轉換。RGB 三元組可以使用 RGB 轉 HEX 轉換器重寫為六位數 HEX;具名顏色可以在具名顏色對照表中對應到標準化的 HEX。半透明顏色不是單一獨立的不透明 sRGB 顏色——請先在你預計觀看的同一個已知背景上合成它,採樣結果,然後才以 #RRGGBB 格式輸入。狹窄的輸入格式是有意為之:它讓色彩空間和不透明度明確呈現,而不是將解析或合成的假設隱藏在計算工具內部。

誤讀 Delta E 2000 數字

一旦計算回傳一個乾淨的數字,下一組錯誤就會出現在詮釋上。最常見的是將 Delta E 2000 視為一個通用的裁決。它是在一個特定路徑下的可重現比較:sRGB → 線性 → D65 XYZ → Bradford 適應 D50 → CIELAB → CIEDE2000,其中 kL = kC = kH = 1。不同的轉換路徑、光源、觀察者或加權方式,即使對同一組實體樣本,也會產生不同的數字。

工作流程容差心態為何門檻不同
網頁設計 token 審查越接近零越安全;記錄所選定的數值token 驅動的是程式碼而非油墨;品牌意圖與下游對比重於物理表現
照片修圖比較修圖前後,而非絕對值觀察者、螢幕色域與環境光源主導感知
印刷與包裝品管遵循該基材所適用標準的門檻油墨組、特性檔、基材與光源決定了規則
油漆與紡織品配色使用校準過的儀器並進行同色異譜檢查表面紋理、光澤與同色異譜讓螢幕上的比較變得不可靠

另外還有兩個值得提出的閱讀錯誤。首先,頁面上的兩個顏色色塊是快速的視覺參考,而非色度學證據——瀏覽器渲染、螢幕色域、色彩設定檔、亮度與校準都會改變色塊看起來的樣子,卻不會動到那個數字。其次,數值運算僅根據輸入的 sRGB 座標與有完整文件記載的轉換路徑;它無法量測真實物件、無法推斷印表機特性檔,也無法回報人類觀察者是否會察覺差異。將結果視為可重現的比較輔助工具,再附上能將其轉化為決策的工作流程脈絡。

當計算工具不是合適的工具時

在某些相鄰的色彩任務中,伸手使用這個計算工具本身就是一個錯誤。對於文字可讀性與無障礙設計,有意義的問題是相對於 WCAG AA 或 AAA 的對比值,而不是感知上的色彩距離——色彩對比檢查工具才是處理那項任務的合適工具。對於實體製造決策,你需要一台分光光度計、你流程所要求的標準與容差,以及該標準中明列的光源與觀察者條件;W3C 的 CSS Color 4 轉換範例程式碼是數學運算的參考,而不是量測的替代品。這個計算工具也不會從照片中擷取顏色——如果你的兩個顏色來自影像,請先使用專門的選色工具進行採樣。

在問題是「兩個不透明 sRGB 顏色在數學上是否接近」、「想要用可重現的數字記錄一次設計 token 修訂」、「正在將從影像採樣到的顏色與目標值比較」,或是「需要在 QA 備註中留下另一位同事能完全重跑的資料」時,使用色彩差異計算工具。記錄 HEX 配對、Delta E 2000 結果、你工作流程接受的容差,以及觀看或生產的脈絡。有了這四項資訊,計算工具就是一個快速、確定性的輔助工具。若缺少這些,即使是正確的數字也難以為其辯護。

如果你正在權衡選項,使用 Delta E 2000 計算工具比較兩種顏色對此有詳細說明。

如果你正在權衡選項,產生 CSS 核取方塊後的常見錯誤對此有詳細說明。