如何使用色碼轉換
- 在「輸入任意色碼」輸入 #2456e3、rgb(36, 86, 227)、hsl(224, 77%, 52%) 或 oklch() 等格式，也可以點左側色塊用調色盤挑選。
- 下方會同步顯示 HEX、RGB、HSL、OKLCH 四種格式，按右側「複製」帶走需要的寫法。
- 在「對比度檢查」查看這個顏色搭配白色文字與黑色文字的對比度，以及 AA、AAA 是否通過。
HEX、RGB、HSL、OKLCH 有什麼不同？
HEX 與 RGB 描述的是同一件事：紅、綠、藍三個通道各 0 到 255 的數值，HEX 只是把它寫成十六進位，例如 rgb(36, 86, 227) 就是 #2456e3。若有透明度，HEX 可以多加兩位（#2456e380），RGB 則寫成 rgba() 或 rgb(36 86 227 / 0.5)。
HSL 以色相（0–360 度）、飽和度與亮度描述顏色，比 RGB 更容易手動調整深淺。但 HSL 的「亮度」不符合人眼感受，同樣 50% 亮度的黃色看起來遠比藍色亮。OKLCH 是 CSS Color 4 的新格式，L 代表感知亮度、C 代表彩度、H 代表色相，調整 L 時各種顏色的明暗變化較一致，適合建立設計系統的色階。
WCAG 對比度怎麼計算？
WCAG 2 以「相對亮度」計算兩個顏色的對比度：先把 sRGB 數值轉為線性光，再依人眼對紅、綠、藍的敏感度加權（0.2126、0.7152、0.0722），最後以（較亮者 + 0.05）÷（較暗者 + 0.05）得到 1:1 到 21:1 之間的比值。
一般內文需要至少 4.5:1 才能達到 AA 等級，7:1 達到 AAA；18pt（約 24px）以上，或 14pt（約 18.66px）以上粗體的大字，門檻分別降為 3:1 與 4.5:1。常見的灰色 #777777 放在白底上只有約 4.48:1，差一點未達 AA，改成 #767676 即可通過。
按鈕該用白字還是黑字？
設計按鈕或標籤時，可以直接比較本工具的兩張卡片：哪一個對比度較高，就代表那個文字顏色較容易閱讀。中等亮度的顏色（例如橘色、亮綠色）常常白字和黑字都只勉強及格，這時與其硬套白字，不如把底色調深或調淺一些。對比度只是最低要求，字級、字重與背景圖案也會影響實際閱讀。
常見問題
HEX 色碼可以用 3 位數嗎？
可以。#f60 是 #ff6600 的縮寫，每一位數各自重複一次。4 位數的 #f608 則包含透明度，等於 #ff660088。
為什麼 HSL 轉回 HEX 會差 1？
HSL 的數值經過四捨五入後，再轉回 0 到 255 的整數時可能產生 1 的誤差。需要精確色值時，請以 HEX 或 RGB 為準。
所有瀏覽器都支援 OKLCH 嗎？
目前主流瀏覽器的新版本都支援 oklch()，但較舊的瀏覽器不支援。正式網站可以先寫一行 HEX 或 RGB 作為備援，再寫一行 OKLCH。
可以輸入顏色名稱，例如 red 嗎？
目前不支援 CSS 顏色名稱，請改用色碼，例如 red 是 #ff0000、white 是 #ffffff。
最後更新：