Aa
白字
—
色彩轉換器
輸入任一格式，HEX / RGB / HSL 即時同步。
色彩與對比分析
色彩預覽
輸入色彩後顯示
- HEX
- —
- RGB
- —
- HSL
- —
最近 CSS 顏色名稱
—
—
完全符合
WCAG 對比度
AA / AAA
Aa
黑字
—
輸入任一格式即時同步
HSL 調色棒
拖拉即時調色
H
24°
S
95%
L
53%
快速預設色
關於色彩模型
HEX 是十六進位的 RGB 縮寫——#FF6347 等於 rgb(255,99,71)。每兩個字元代表紅、綠、藍各通道的 0–255 值。三位數縮寫（如 #F00）代表 #FF0000。
HSL 把顏色描述為色相（Hue 0–360°）、飽和度（Saturation 0–100%）、亮度（Lightness 0–100%）。對設計師而言，調整亮度或飽和度比直接修改 RGB 值更直觀。
WCAG 對比比例使用相對亮度公式計算。AA 標準要求正文對比比例 ≥ 4.5:1，AAA 要求 ≥ 7:1。本工具以 RGB 歐氏距離找出最接近的 CSS 顏色名稱（148 個）。
快速導覽
使用情境、常見問題與相關工具
把需要的說明放在工具下方，讓第一次使用與之後回來複用都更順。
英文搜尋: color converter、hex to rgb、rgb to hsl、WCAG contrast checker、CSS color names
使用方式
先完成一次順手的操作
- 在任一欄位輸入色彩值（HEX / RGB / HSL），或使用色輪選色器。
- 右側即時顯示色票、WCAG 對比比例，以及最接近的 CSS 顏色名稱。
- 點擊 ⎘ 複製任一格式，或點選快速預設色直接載入。
常見情境
這個工具實際適合拿來做什麼
- 設計稿轉 CSS把 Figma 的 HEX 色碼轉為 HSL，方便在 CSS 中微調亮度。
- 無障礙檢核確認文字與背景的對比比例是否符合 WCAG AA 或 AAA 標準。
常見問題
先把常見疑問說清楚
支援 alpha 透明度嗎？
目前不支援，僅處理不透明的 RGB 色彩空間。
CSS 顏色名稱怎麼比對的？
使用 RGB 空間的歐氏距離，找出 148 個標準名稱中最接近的一個。