色彩格式轉換與對比度檢查

在 HEX、RGB、HSL 與 HSV 之間轉換色彩，並依照 WCAG 標準檢查文字與背景的對比度。

檔案與內容在您的瀏覽器中處理，不會上傳至我們的伺服器。

工具說明

輸入 HEX、RGB、HSL 或 HSV 色值，即可查看其他格式的對應結果。也可以設定文字與背景色，檢查對比度是否符合 WCAG AA 或 AAA 對一般文字與大型文字的要求。

功能

在 HEX、RGB、HSL 與 HSV 之間轉換
即時預覽色彩
計算 WCAG 對比度
顯示 AA 與 AAA 檢查結果
一鍵複製色值

使用方式

輸入色彩: 輸入 HEX、RGB、HSL 或 HSV 色值，或使用選色器。
複製色值: 複製 CSS 或設計規範所需的格式。
檢查對比度: 設定文字與背景色，檢查內容是否容易閱讀。

範例

檢查品牌配色是否符合 WCAG AA
將 Figma 中的 HEX 色值轉換為 CSS 變數使用的 hsl() 格式
檢查深色模式中的文字色彩
記錄設計系統的色彩階層

限制

對比度預覽對透明度的處理能力有限
取色準確度會受到螢幕校色狀態影響
輸入的色彩值會直接在您的瀏覽器中處理，不會傳送至伺服器。

常見問題

WCAG AA 對比度標準？: 一般文字需 4.5:1；大字（18pt+ 或 14pt 粗體）需 3:1。
HSL 與 HSV 差異？: HSL 的明度與 HSV 的亮度定義不同，因此工具會同時顯示兩種格式，方便與其他軟體對照。
透明度會影響對比度嗎？: 會。半透明文字的實際對比度取決於下方背景；目前的簡易預覽主要以不透明色彩進行計算。