色碼轉換器使用方法
- 點選擇顏色挑選想要的顏色，或在輸入色碼欄位貼上 HEX、RGB、HSL 數值。
- 表格中會列出 HEX、RGB、HSL、HSV、CMYK 數值，按「複製」按鈕即可直接複製。
- 在文字對比度區塊查看白字和黑字哪一種在這個背景色上比較清楚。
- 點下方色票中同色系的較亮或較暗顏色，就能直接改選該顏色。
HEX 怎麼轉成 RGB？
HEX 色碼 #RRGGBB 是把紅、綠、藍三個數值分別寫成兩位十六進位數（00～FF，等於十進位的 0～255）。每兩位切開、換算成十進位，就是 RGB。
#FF8800 → FF=255、88=136、00=0 → rgb(255, 136, 0)
反過來把 RGB 轉成 HEX 時，就把每個數值換成兩位十六進位數再串起來。37 → 25、99 → 63、235 → EB，所以 rgb(37, 99, 235) 就是 #2563EB。三位數的 HEX（#F80）等於每一位重複一次的 #FF8800。想了解十六進位怎麼算，可以使用進位轉換器。
HSL、HSV、CMYK 有什麼不同？
| 格式 | 組成 | 常見用途 |
|---|---|---|
| RGB / HEX | 光的三原色強度（0～255） | 網頁、螢幕設計 |
| HSL | 色相（0～360°）、飽和度、亮度 | 在 CSS 中只想調整明暗時 |
| HSV（HSB） | 色相、飽和度、明度 | Photoshop 等繪圖軟體的取色器 |
| CMYK | 四色油墨比例 | 印刷品 |
CMYK 數值是由 RGB 以公式計算出的近似值。實際印刷顏色會因紙張與印表機的色彩描述檔而不同，重要的印刷品（名片、海報、包裝等）請先向印刷廠確認他們的色彩標準，必要時打樣確認。
對比度 4.5:1 標準與文字顏色的選擇
網頁無障礙指引（WCAG 2.1）建議一般文字與背景的對比度至少 4.5:1（AA），大字（約 24px 以上，或粗體 18.66px 以上）至少 3:1。達到 7:1 以上則符合更嚴格的 AAA 標準。
對比度是用兩個顏色的相對亮度 L 計算：(較亮的 L + 0.05) ÷ (較暗的 L + 0.05)。白色與黑色的對比是最大值 21:1。決定按鈕或橫幅顏色時，選擇上方結果中標示 AA 通過的文字顏色，大多數人都能輕鬆閱讀。製作政府機關或公共服務網站時，也常需要符合無障礙規範，可以先用這裡快速檢查。
在 CSS 中使用色碼
轉換後的數值可以直接貼進 CSS，下面三種寫法都是同一個顏色：
color: #2563EB;color: rgb(37, 99, 235);color: hsl(221.2, 83.2%, 53.3%);
需要半透明色時，可以像 rgb(37 99 235 / 50%) 一樣在斜線後寫透明度，或在 HEX 後面多加兩位，寫成 #2563EB80（80 約等於 50% 不透明度）。
使用小技巧
- 從設計稿、品牌規範或簡報檔複製來的色碼，常常不帶
#或是三位數寫法，直接貼上即可辨識。 - 想替同一個品牌色做出一組深淺色（例如按鈕的一般、滑過、按下狀態），可以從下方的調亮・調暗色票中挑選。
- 所有計算都在瀏覽器中完成，不需要註冊帳號。
常見問題
HEX 色碼可以不加 # 嗎？
可以。像 FF8800 這樣省略 # 也能辨識。三位數（F80）與含透明度的八位數 HEX 也能讀取，但透明度數值會被忽略。
RGB 數值要用什麼格式輸入？
輸入 rgb(255, 136, 0)，或像 255, 136, 0 這樣用逗號或空格分隔三個數字即可。
為什麼 CMYK 數值和設計軟體顯示的有點不一樣？
這個工具不套用色彩描述檔，而是用標準公式換算。Photoshop、Illustrator 會套用印刷用色彩描述檔，所以數值可能不同。
想知道照片裡某個顏色的色碼怎麼辦？
把照片上傳到圖片取色器，點選想要的位置，就會告訴你該處的 HEX 色碼。
HSL 和 HSV 的數值可以直接互換嗎？
不行。兩者的色相相同，但飽和度與亮度（明度）的定義不同，數值會不一樣，請依照軟體使用的格式複製對應的那一列。