如何使用
- 貼上或選取你實際要比較的兩個顏色。
- 查看簡單標籤與數值差距,不要只憑印象判斷。
- 只有在最終前景色與背景色組合確定後,再前往對比度檢查器。
以數值比較兩個候選色
已有兩個候選色,並需要在最終設計、色票或 UI 決策前快速做數值檢查時,請使用此工具。
#2563eb
#1d4ed8
如何選擇相關工具
還在挑選第一個色彩時,請使用 顏色選擇器;想依色彩關係產生組合時,請使用 色彩和諧;想從一個基色延伸明暗與階層時,請使用 色票 或 色標。已有兩個候選色並想量化差異時,請使用本頁。確定採用後,如需 OKLCH / OKLab 值以調整設計 token 或交付 CSS,請前往 OKLCH 轉換器;如需建立 color-mix(),請前往 CSS 顏色混合。只有要驗證文字與背景的可讀性時,才使用 對比檢查器。
常見問題
這個頁面可以做什麼?
本頁以 RGB 距離與簡化的 ΔE76 比較兩個色彩,並列出兩側的 HEX、RGB 與 HSL。
何時該改用對比檢查器?
要檢查前景文字與背景的可讀性時,請使用對比檢查器;要判斷兩個色票是否太相近或明顯不同時,請使用本頁。
何時該使用色彩和諧或色票工具?
需要依色彩關係產生組合時,請使用色彩和諧;需要從一個基色延伸明暗與強調色時,請使用色票工具。已有兩個候選色並想量化差異時,再使用本頁。
分享 URL 會包含什麼?
分享 URL 只包含左右兩側的 HEX 色值。