色彩差異計算器
比較兩種不透明的 HEX 色彩,並以基於標準的 CIEDE2000 值進行分析,檢視每一個 D50 CIELAB 坐標。
隱私權:你的檔案不會離開裝置,所有處理均在瀏覽器本機完成。
使用方式
- 1.請輸入兩種不透明的六位數 sRGB HEX 色彩,並包含每種色彩前導的 # 符號。
- 2.選擇「比較色彩」以將兩種色彩轉換為 D50 CIELAB,並計算 CIEDE2000 值。
- 3.記錄原始的 HEX 值以及 Delta E 2000 結果,並包含其容差與觀測情境,以符合你的工作流程。
關於色彩差異計算器
色彩差異計算器會比較兩種不透明的 sRGB 色彩,使用 CIEDE2000 色差公式。請為每種色彩輸入一個六位數的 HEX 值,執行比較,並檢視數值化的 Delta E 2000 結果,以及用於計算的 D50 適配 CIELAB 坐標。所有運算皆在瀏覽器中本機執行,不會上傳任何色彩值。
接受的輸入格式刻意限制:必須為 #RRGGBB。三碼簡寫、帶透明度的 HEX、命名色彩、顯示 P3 值以及格式錯誤的字串皆被拒絕,而非默默重新解釋。這讓色彩空間與不透明度明確呈現。若需考慮透明度,應先將兩種色彩以相同已知背景合成為不透明色彩再進行比較,因為半透明前景並非單一獨立的不透明 sRGB 色彩。
轉換流程遵循 CSS 色彩 4 之樣本路徑。每個 sRGB 通道會先歸一化至零到一之間,經由 sRGB 轉換函式線性化,轉換為相對於 D65 的 CIE XYZ,再以布拉德福矩陣由 D65 修正至 D50,最後由 D50 XYZ 轉換為 CIELAB。顯示用的 Lab 值會四捨五入,而未四捨五入的數值則繼續用於差異公式計算。
CIEDE2000 比簡單的歐幾裡得距離更複雜。它會在中性區域調整 CIELAB a 軸,處理跨越零度的色調角度,對亮度、色度與色調差異進行加權,並加入藍色區域的旋轉項。此實現使用常見的預設引數權重 kL、kC 與 kH,皆設為一。
此數值具有對稱性,在相同預設條件下:比較 A 與 B 的結果等同於比較 B 與 A,僅受限於浮點數顯示精確度。相同色彩會返回零。較大的值表示公式定義的差異較大,但頁面刻意不標註任何固定數值為透過、失敗、完全相同或適用於所有觀察者或所有生產流程。
視覺感受取決於觀看環境、顯示器校準、環境光、表面紋理、周圍色彩、觀察者視力以及工作流程中設定的容忍度。印刷、油漆、紡織品、品牌審查、攝影與介面設計可能使用不同的儀器與接受標準。請將此結果視為可重複的比較輔助工具,而非保證兩種實體樣品會完全一致。
兩種色彩樣張提供快速視覺參考,但螢幕預覽並非色度學證據。瀏覽器渲染、顯示器色域、色彩配置檔、亮度與校準可能改變視覺效果。數值計算僅基於輸入的 sRGB 坐標與公開的轉換流程,無法測量真實物件,亦無法推匯出印刷機配置。
當需要檢視兩種 CSS 色彩是否數學上接近、記錄設計標籤修訂、比較圖片樣本中的色彩、或建立可重複的品質檢驗註記時,可使用此工具。請同時記錄原始 HEX 值、報告的 Delta E 2000 數值,以及觀看或生產情境,若需他人重製此決定。
輸入驗證在計算前完成。空值、缺失的雜湊值、簡寫、透明度、非十六進位字元或額外數位會產生明確錯誤且無結果。此實現還包含八組帶符號敏感性的參考對,源自 Sharma、Wu 與 Dalal 補充資料集,因此對色調包絡或權重項的改變,無法僅在簡單身份案例中透過。
這是一個確定性之本機運算的色彩差異計算工具,並非圖片選擇器、分光光度計、ICC 檔案轉換器、可訪問性對比檢測器,或認證服務。若需檢視文字可讀性,請使用對比比率工具;若涉及實體製造決策,則應使用經校準之測量裝置,並符合該流程所需的標準、公差、照明條件與觀測條件。
方法與來源
瀏覽器會解析兩種不透明的 #RRGGBB sRGB 色彩,執行 CSS 色彩 4 的 sRGB 至線性、D65 XYZ、布拉德福至 D50 的適應、以及 CIELAB 轉換,再以 kL=kC=kH=1 計算 CIEDE2000,並對比八組 Sharma 補充的 Lab 對資料進行驗證。
常見問題
- Delta E 2000 的數值代表什麼意思?
- 這是一個基於公式計算的兩種 CIELAB 色彩之間的數值差異,採用預設權重。數值越大,表示差異越明顯,但並無普遍適用的透過或失敗門檻。
- 為何僅接受六位數的 HEX 色彩?
- 此工具僅比較不透明的 sRGB 色彩,拒絕簡寫、透明度(alpha)及其他色彩空間,以避免隱藏的解析或疊合假設。
- 使用哪個白點作為 CIELAB 的參考?
- sRGB 會先轉換為 D65 XYZ,再經由布拉德福(Bradford)適應至 D50,最後轉換為 CIELAB,遵循 CSS 色彩 4 的樣本轉換路徑。
- 此工具能證明兩份印刷樣品相符嗎?
- 不能。實際的物理匹配需要經校準的儀器,以及特定流程所需的照明條件、觀測條件、色彩配置檔案、基底材料與容差設定。
相關工具
- 色彩對比檢查器即時檢查任意文字色彩與背景色彩組合是否符合 WCAG AA 與 AAA 對比規則。
- 色彩混合器將任意兩種顏色混合,並讀取結果的精確十六進位碼與 RGB 值——兩者之間會呈現即時漸層效果。
- RGB 轉 HSV 轉換器將整數 RGB 通道轉換為色調、飽和度與亮度,並設定明確範圍,正確處理無色調情況,並提供即時色彩預覽。
- HEX 轉 RGB 編碼轉換器將 CSS 十六進位顏色轉換為精確的紅、綠、藍以及可選透明度通道值。
- CMYK 轉為 RGB預覽未校準的 CMYK 百分比,作為大約的螢幕 RGB 顏色與十六進位值。
- 色彩漸層生成器視覺化建立線性與放射狀 CSS 漸層,並以一鍵複製可直接使用的程式碼。
色彩工具 使用指南
查看全部- Color Difference Calculator for Web Design Tokens (英文原文)
- Color Difference Calculator for Beginners: HEX to Delta E (英文原文)
- Color Difference Calculator Explained: Delta E 2000 (英文原文)
- Color Difference Calculator CSS Code: Compare HEX Pairs (英文原文)
- Color Difference Calculator Chart: Read Delta E 2000 (英文原文)
- Color Difference Calculator Alternative: A Browser Tool (英文原文)
- Color Difference Calculator vs Accessibility Contrast (英文原文)
- How to Measure Color Difference Between Two HEX Colors (英文原文)
- How to Find Color Difference Between Two HEX Codes (英文原文)
- How to Calculate Color Difference Between Two HEX Values (英文原文)
- Color Palette Generator on Android: A Browser Guide (英文原文)
- Choosing the Right Approach to Mix Two HEX Colors (英文原文)
- Gradient Generator Explained: How the CSS Gets Built (英文原文)
- Color Contrast Checker Free, No Sign Up (英文原文)
- Web Safe Colors Explained: The 216-Cube Formula (英文原文)
- How to Choose the Right Approach to Generate an SVG Pattern (英文原文)
- How to Compare Approaches to Generate an SVG Blob (英文原文)
- Is an RGB to HSV Converter Safe to Use Online? (英文原文)
- RGB to HEX for Beginners: A Plain-English Walkthrough (英文原文)
- RGB to CMYK Chart: Common Colors and Conversion Guide (英文原文)