什麼是色碼轉換？
設計軟體用 HEX、CSS 用 RGB 或 HSL、印刷廠則用 CMYK，不同場合使用的色碼格式各不相同。在這個工具的任何欄位輸入，其他格式都會立即同步，也能複製含透明度（Alpha）的 CSS 程式碼。
工具也會計算文字色與背景色的對比度，並以 AA、AAA 標章顯示是否符合網頁內容無障礙指引（WCAG 2.1）；臺灣的網站無障礙規範同樣以 WCAG 2.1 為基礎。
使用方法
- 點左上角的大色塊選擇顏色，或在 HEX、RGB、HSL、HSV、CMYK 任一欄位輸入色碼。
- 拖動透明度滑桿，即可產生含 Alpha 值的 8 位數 HEX 以及 rgba、hsla 色碼。
- 在色彩對比度查看與白色、黑色及自選顏色的對比度與是否通過。
- 點調亮・調暗色階中的顏色可複製 HEX 色碼，也可以在最下方一次複製 CSS 程式碼。
色碼格式整理
| 格式 | 範例 | 說明 |
|---|---|---|
| HEX | #4f46e5 | 紅、綠、藍各以 2 位十六進位表示；8 位數時最後 2 位為透明度 |
| RGB | rgb(79, 70, 229) | 每個色版 0～255 |
| HSL | hsl(243, 75%, 59%) | 色相（0～360°）、飽和度、亮度，調整顏色很直覺 |
| HSV (HSB) | hsv(243, 69%, 90%) | Photoshop、Figma 取色器使用的模式 |
| CMYK | cmyk(66%, 69%, 0%, 10%) | 印刷油墨比例 |
對比度標準（WCAG 2.1）
| 等級 | 一般文字 | 大型文字 |
|---|---|---|
| AA（最低標準） | 4.5:1 以上 | 3:1 以上 |
| AAA（強化標準） | 7:1 以上 | 4.5:1 以上 |
大型文字是指 18pt（約 24px）以上，或粗體 14pt（約 18.66px）以上的文字。要通過無障礙檢測，內文至少需達到 4.5:1。對比度範圍從 1:1（同色）到 21:1（白與黑）。
常見問題
螢幕上的顏色和印出來不一樣？
螢幕以光的三原色（RGB）混色，印刷則以油墨（CMYK）混色，可呈現的色域不同。本工具的 CMYK 是簡易換算公式的值，與套用 FOGRA39 等色彩描述檔的數值會有差異，重要印刷品請先打樣確認。
8 位數的 HEX 色碼是什麼？
格式為 #RRGGBBAA，最後 2 位是透明度：80 約為 50%、CC 為 80%、FF 為 100%（不透明）。所有新版瀏覽器都支援。
半透明顏色的對比度怎麼算？
有透明度時，實際看到的顏色會隨背景改變，因此本工具會去除透明度，以不透明的顏色計算對比度。
可以輸入顏色名稱嗎？
可以。在 HEX 欄位輸入 red、navy、skyblue、tomato 等 148 種 CSS 標準顏色名稱，就會換成該顏色。