Delta E 2000 是一種基於公式的數值差異，用以衡量兩個 CIELAB 色彩在預設權重下的差距，其中零代表這兩個 sRGB HEX 值描述的是完全相同的色彩，而較大的數值則表示兩者之間的計算差異更大。色彩差異計算工具會在本機端對兩個不透明的六位數 HEX 輸入執行該公式，並在計算過程中使用的 D50 適應 CIELAB 座標旁，回傳 Delta E 2000 的數值。在調色盤工作中，這點很重要，因為類似色、單色、分裂互補與三色等和諧規則描述的是色相關係，但它們並不保證最終產生的色樣之間、或與相鄰 UI 元素之間，能保持一個實用的差距。一個可重現的數值檢查能讓設計師判斷:調色盤中兩個相鄰色樣在螢幕上是否實際上難以區分、品牌色彩的修訂版本是否偏離原始色彩過遠，以及前景與背景配對在數學上的差距是否足以構成一個有意義的視覺配對，而不是一個意外的近似重複。
Delta E 2000 為色彩配置帶來什麼
大多數調色盤工具會運用互補色、類似色、三色、四色或分裂互補等色彩理論規則，來回答「哪些色彩適合搭配這個基礎色」這類問題。這些規則能產生乍看之下平衡感良好的和諧色相家族。它們本身並無法回答「在我選定的調色盤中，這兩個特定色樣的差異有多大」這個問題。設計師可能會建立一個類似色調色盤，其中最淺與次淺的兩個色樣在明度與彩度上僅相差幾個點，使得這組搭配在 UI 清單中看起來像是意外的複製。互補色的配對也可能在飽和度上過於接近，削弱了該規則原本應提供的對比。
Delta E 2000 提供了一個單一數值，用來總結兩個特定色彩之間的感知距離，經歷了從 sRGB 經線性化 sRGB、再到相對於 D65 的 CIE XYZ，接著從 D65 經 Bradford 適應到 D50，最後得到 D50 CIELAB 座標的轉換流程。該公式接著會調整中性區域附近的 CIELAB a 軸，處理跨越零度邊界的色相角度，對明度、彩度與色相的差異進行加權，並為藍色區域加入一項旋轉項。此處使用的預設參數權重為 kL、kC 與 kH 皆等於 1，符合原始 Sharma、Wu 與 Dalal CIEDE2000 研究中所記載的常見參考實作，以及 W3C CSS Color 4 範例程式碼中所重現的設定。
對一個調色盤而言，這個單一數值能回答三個實務問題。第一，兩個色樣是否夠接近，可視為扮演相同的角色，還是差距夠大，足以擔任不同的角色。第二，設計系統第二版的品牌色彩是否已經超出團隊對第一版設定的容許範圍。第三，兩個強調色之間的關係是否在數學上站得住腳，而與設計該調色盤時所用特定螢幕器的視覺效果無關。
逐步比較兩個調色盤色彩
比較本身是一段簡短的工作流程，任何審閱者皆可在無專業設備的情況下執行。
- 從您要評估的調色盤中挑選兩個不透明的六位數 sRGB HEX 值，兩者皆須包含前置井字號(#)。請使用將出現於 CSS、設計權杖或匯出資產中的精確數值，以確保比較結果與實際生產環境的輸入相符。
- 開啟色彩差異計算工具，並在每個欄位中輸入一個 HEX 值。三位數縮寫、帶 Alpha 通道的 HEX、具名色彩以及 display-p3 值皆不予接受，因此任何半透明效果必須先在特定背景上進行合成，再擷取 HEX 值。
- 選擇「比較色彩」，讓工具依文件記載的 sRGB 線性化、D65 XYZ、Bradford D50 適應至 D50 CIELAB 路徑來轉換兩個輸入，接著以預設權重評估 CIEDE2000。
- 讀取 Delta E 2000 的結果，以及每個色彩的 D50 CIELAB 圓整後座標。Lab 數值是為了顯示而經過圓整，而未經圓整的值才是實際進入差異公式運算的數字。
- 記錄下原始的 HEX 值、Delta E 2000 的數值，以及觀看或生產環境的背景，例如「於日光下的 sRGB 螢幕器上的 UI 清單列」或「行銷網站的品牌權杖審查」。這份紀錄能在數週後另一位審閱者挑選相同調色盤時，讓決策過程保持可重現，並能自然地與更深入的逐步說明相互搭配，例如如何測量兩個 HEX 色彩之間的差異。
解讀結果以輔助調色盤決策
完全相同的 HEX 輸入必定會回傳零。任何大於零的數值都代表公式在這兩個 CIELAB 色彩之間發現了差異。該工具並不會為這個數字附加通過或失敗的標籤，因為視覺感知會受到觀看條件、螢幕校準、環境光、表面質感、周圍色彩、觀察者的視力，以及團隊所設定的容許範圍所影響。下表整理了 Delta E 2000 數值通常被解讀的方式，作為調色盤審查的起點，並列出每個範圍通常對應的調色盤決策類型。請將這些數字視為業界廣泛引用的指引，而非計算工具本身強制執行的判斷標準。
| Delta E 2000 範圍 | 一般視覺感受 | 對調色盤設計的意涵 |
|---|---|---|
| 0 至約 1 | 人類觀察者在一般觀看條件下無法察覺差異 | 色樣扮演相同角色;適合用於單一 UI 元素內部的細微色調變化，但不適合做為獨立的調色盤項目。 |
| 約 1 至 2 | 僅在近距離檢視時才能察覺，通常只有受過訓練的眼睛看得出來 | 適用於單一漸層中相鄰的步階，但對兩個分別命名的調色盤權杖而言，通常過於接近。 |
| 約 2 至 3.5 | 在仔細並列比較時可以察覺 | 對於同調色盤內相關的強調色，例如主要色與較柔和的輔助色，屬於合理的區隔。 |
| 約 3.5 至 5 | 明顯不同但仍屬相關 | 在一般介面調色盤中，作為主要與次要角色之間舒適的距離。 |
| 5 以上 | 一眼即可視為不同色彩 | 強對比，適合主要與強調色的搭配，或在中性表面上用於行動呼籲的色彩。 |
這些範圍描述的是該數字所指的方向與大致量級，並非具約束力的標準。同一個 Delta E 2000 結果，可能在品牌審查中太小，卻在裝飾性漸層中完全可接受。容許範圍屬於工作流程的一部分。
常見的調色盤配對測試情境
當成對比較被應用於調色盤中的結構性角色，而非所有可能的組合時，才會發揮實際效益。以下幾個情境已涵蓋設計師運用差異數值所需進行的絕大多數工作。
- 單一漸層中的相鄰步階。如果一組五個灰色的中性漸層中，最淺與次淺的色樣過於接近，整體可能會在視覺上產生漂移。將這兩個色樣輸入計算工具即可判斷:在一般螢幕器上，該差距是否足以讓使用者區分各列。
- 品牌色彩的修訂。新的主要色相對於先前的主要色應該產生接近零或非常小的 Delta E 2000，否則下游取用舊色的元件會顯得明顯走調。當飄移超出團隊選定的容許範圍時，通常需要新增一個帶名稱的權杖，或明確記錄一項有意的例外。
- 主要色與強調色的配對。互補與三色規則挑選的是理論上具有對比的色相，但實際能否吸引目光，取決於飽和度與明度的差異。將主要色與每個強調色逐一透過計算工具進行比較，即可確認該配對在預期用途表面上是否落在「明顯不同但仍屬相關」的範圍內。
- 背景與表面的配對。兩個幾乎相同的表面色調，若作為相鄰的卡片或列使用，可能會在視覺上塌縮成同一平面。透過數值檢查，設計師即可預先得知所選配對將被讀為單一色調而非兩個。
- 取樣自影像的色彩與品牌權杖的比較。當品牌色彩取樣自照片或第三方素材時，取樣所得的 HEX 可能與標準權杖有所偏差。將取樣值與標準權杖進行比較，即可記錄實際差距的大小，並有助於判斷該影像是否需要重新取樣，或該權杖是否需要記錄一項容許範圍。
針對這些結構性配對執行計算工具，會產生一組數量少、易於據以決策的數值，而不是一大堆沒人會仔細閱讀的比較結果。狹窄的輸入格式也讓結果保持誠實:每一對都是真實的不透明 sRGB 色彩，而非經過解析的縮寫近似值，也不是經過轉換的 display-p3 值。
Limits of a Browser-Based Comparison
The calculator returns a reproducible, formula-based number, which is exactly what a palette review needs when the question is mathematical closeness. It does not, and is not designed to, cover every question a designer might have about a palette. A few limits are worth naming so the tool is used for the work it fits and is paired with the right companion for the work it does not.
- It compares two colors, not a whole palette. Pairwise checks still need to be chosen by hand. For a five-color palette there are ten pairs; for ten colors there are forty-five. The tool reports each pair accurately, but it does not draw a graph of the whole scheme.
- It does not judge perception. The number is a function of the entered sRGB coordinates and the documented conversion path. Two HEX values that look identical on a calibrated monitor can still produce a non-zero result, and two values that look obviously different can land at a small Delta E 2000 if the difference is concentrated in lightness alone.
- It does not certify physical production. Printing, paint, textiles, brand review, and interface design can use different instruments, observer conditions, and acceptance limits. The browser result is a comparison aid, not a guarantee that two physical samples will match. Real production decisions still need calibrated equipment and the process-specific tolerance.
- It does not check accessibility. Delta E 2000 measures perceived color difference, not text readability. For foreground and background pairs that need to pass WCAG contrast, the right tool is a contrast checker, not this calculator.
- It runs on sRGB. Wide-gamut display-p3 values are rejected by design, so any palette that lives in a wider color space needs to be compared inside that space or pre-mapped to sRGB before the pair is checked here.
Used inside those limits, the calculator gives a palette review a numeric spine: every decision about whether two swatches are too close, comfortably apart, or accidentally identical can be backed by a single formula-based number, the HEX values that produced it, and the viewing or production context that gave the number meaning. That record is what lets a design system survive reviews, revisions, and the inevitable second monitor.
If you're weighing options, Color Difference Calculator for Shades and Variations covers this in detail.