色碼的五種寫法
- HEX（十六進位）：網頁最常見，寫成 #RRGGBB，兩位一組分別是紅、綠、藍，每組 00 到 FF（對應 0 到 255）。#000000 是黑、#FFFFFF 是白、#FF0000 是純紅。三碼寫法 #F00 等於 #FF0000。
- RGB：紅、綠、藍三個 0 到 255 的數字，是螢幕實際混色的方式，CSS 寫成 rgb(255, 0, 0)。
- HSL：色相（0–360 度的色環位置）、飽和度、亮度。想要「同一個顏色深一點、淺一點」，只動亮度就好，非常適合調配色。
- HSV（HSB）：色相、飽和度、明度。很多設計軟體的取色盤是這種模型：橫軸飽和度、縱軸明度。
- CMYK：印刷用的青、洋紅、黃、黑四色油墨比例，以百分比表示。這裡是用數學公式從 RGB 近似算出，不等於印刷廠實際調出來的顏色。
怎麼用這個工具
- 用取色器選色，或直接在 HEX、RGB、HSL、HSV、CMYK 任一欄輸入數字，其他欄會同步換算。
- 手上有別人給的色碼，格式不確定時，貼到「貼上任何格式的色碼」欄，按「辨識並套用」，支援 HEX、rgb()、hsl()、cmyk() 與 CSS 色名。
- 想知道圖片裡某個顏色的色碼，選一張圖片，再點圖上那個位置。
- 要找名字叫得出來的顏色，在 148 色色碼表裡搜尋或依色相排序瀏覽。
- 配好文字色與背景色後，到下方檢查對比度，看看通不通過 AA 或 AAA。
對比度為什麼重要
灰色字配淺灰底看起來很時尚，但對很多人其實不好讀，尤其是長輩、視力不佳的人，或在戶外太陽底下看手機的時候。WCAG 的對比度公式是這樣算的：先把每個顏色的 RGB 換成線性值，算出相對亮度 L（綠色權重最大，藍色最小，因為人眼對綠色最敏感），再用 (較亮的 L + 0.05) ÷ (較暗的 L + 0.05) 得到比值，範圍落在 1 到 21 之間。
一般網頁文字建議至少達到 AA 的 4.5:1。如果你的品牌色拿來當白底上的文字沒通過，最簡單的作法是把色彩調暗一點，也就是在 HSL 裡降低亮度。要注意的是，對比度只是衡量「亮度差」，色盲使用者的狀況還要看色相搭配（例如紅與綠），不要單靠顏色傳達重要資訊。
設計與列印時的小提醒
- 螢幕與紙張：螢幕上鮮豔的藍、綠、螢光色，印刷時常常變暗淡，這是色域不同造成的，不是你的檔案壞了。重要的品牌色請向印刷廠要色票對色。
- 色碼要記下來：把確定的色碼記在品牌規範裡，之後網頁、簡報、海報才能維持同一個顏色。
- 同色不同寫法：#FF0000、rgb(255,0,0)、hsl(0,100%,50%)、red 在 CSS 裡都是同一個顏色，用哪一種看你的團隊習慣。
- 四捨五入：HSL、HSV 在換算時會取整數，轉過去再轉回來，RGB 偶爾會差 1。要保留精確色值，以 HEX 或 RGB 為準。
常見問題
HEX 色碼和 RGB 有什麼不同？
兩者說的是同一件事，只是寫法不同。RGB 用紅、綠、藍三個 0 到 255 的數字描述顏色，例如 rgb(37, 99, 235)。HEX 是把這三個數字各轉成兩位的 16 進位，再接在 # 後面，同一個顏色寫成 #2563EB。網頁和設計軟體都能用，HEX 比較短，RGB 比較容易想像「紅多一點」。三碼的 #26E 是六碼 #2266EE 的簡寫，每一位重複一次。
HSL 和 HSV 差在哪？設計時該用哪個？
HSL 與 HSV 都用「色相、飽和度、明度」來描述顏色，比 RGB 更貼近人眼的想法：色相是色環上的角度（0 是紅、120 是綠、240 是藍），飽和度是顏色鮮不鮮豔。差別在第三個值：HSL 的 L 是亮度，50% 是最鮮豔的顏色，往 0 變黑、往 100 變白；HSV（也叫 HSB）的 V 是明度，100% 是最亮，往 0 變黑，要變白得降低飽和度。CSS 直接支援 HSL，所以寫網頁調顏色深淺時用 HSL 比較方便；Photoshop、Figma 的取色盤多半是 HSV。
為什麼螢幕上的顏色和印出來的不一樣？CMYK 轉換準嗎？
螢幕用光混色（紅綠藍，RGB），加起來會變亮；印刷用油墨混色（青、洋紅、黃、黑，CMYK），加起來會變暗。兩者能呈現的色彩範圍不同，高鮮豔度的藍、綠、橘在印刷上常常做不出來。再加上紙張、油墨、印刷機與螢幕校色的差異，同一個色碼印出來一定會有落差。這個工具的 CMYK 只是用最簡單的數學公式從 RGB 換算，沒有套用任何色彩描述檔（ICC profile），只能當參考。要印刷請以印刷廠提供的色票或專業軟體（例如依 PANTONE 或廠商指定的描述檔轉換）為準。
WCAG 對比度 4.5:1 和 3:1 是什麼意思？
WCAG（網頁內容無障礙指引）用「對比度」衡量文字與背景是否夠清楚，數值從 1:1（完全一樣）到 21:1（黑配白）。AA 等級要求：一般大小文字至少 4.5:1，大字（約 24 px 以上，或 18.66 px 以上的粗體）與介面元件、圖示至少 3:1。比較嚴格的 AAA 等級要求：一般文字 7:1、大字 4.5:1。視力不佳、年長者、在戶外強光下看手機的人都會受惠，台灣的政府網站無障礙規範也是以這份指引為基準。
從圖片取色會把我的圖片上傳嗎？取到的顏色準嗎？
不會上傳。圖片只在你的瀏覽器裡讀取，點哪裡就讀那一個像素的紅綠藍值，不經過任何伺服器。取到的是圖片檔案裡該像素的色值；如果圖片經過壓縮（例如 JPG），邊緣附近的像素會有細微的雜訊，建議點在大面積純色的地方。要注意的是，你在螢幕上「看到」的顏色可能還受螢幕色彩設定影響，但取出來的色碼是檔案本身的數值。
CSS 具名色有幾個？可以直接在網頁裡寫顏色名稱嗎？
CSS Color Module Level 4 規格列了 148 個具名色，包含 gray 與 grey 這種兩種拼法的重複顏色，以及後來加入的 rebeccapurple。可以，在 CSS 裡直接寫 color: tomato 就行，所有主流瀏覽器都支援。具名色方便寫範例、做原型，正式專案通常還是改用品牌色的 HEX 或 CSS 變數，比較好統一管理。下方的色碼表可以搜尋名稱或色碼，點一個顏色就會帶到上面的轉換器。
規格與來源
- CSS 具名色（148 個）、HSL 與 sRGB 換算：W3C《CSS Color Module Level 4》（w3.org/TR/css-color-4）。
- 對比度公式與 AA／AAA 門檻：W3C《Web Content Accessibility Guidelines (WCAG) 2.1》，成功準則 1.4.3、1.4.6、1.4.11 與「相對亮度」「對比度」定義（w3.org/TR/WCAG21）。
- sRGB 色彩空間：IEC 61966-2-1。本頁相對亮度的線性化採 0.04045 為分界。
- CMYK 為 K = 1 − max(R, G, B) 的簡單公式近似，沒有色彩描述檔，僅供參考，不能用來對色。