色彩選擇器如何在不同色彩格式之間轉換？
在色譜上選取顏色後，工具先將它記錄為 HSV 座標（色相角度、飽和度、明度）。接著 HSV 轉成 RGB，RGB 編碼為 HEX（每通道兩個十六進位數字），另有獨立公式產生 HSL、HWB 和 CMYK。這些轉換遵循 CSS Color Level 4 規範中定義的演算法。六種格式會同時重新計算，移動選擇器後數值立即更新，沒有可感知的延遲。
選取任意顏色，在 HEX、RGB、HSL、HSV、HWB 和 CMYK 格式之間快速轉換
顏色選擇器
選取任意顏色，取得 HEX、RGB、HSL、HSV、HWB 和 CMYK 格式的數值。
HEX
RGB
HSL
HSV
HWB
CMYK
對比度預覽
白底
範例文字
4.0:1AA: 未通過AAA: 未通過AA Large: 通過
黑底
範例文字
5.3:1AA: 通過AAA: 未通過AA Large: 通過
淺色調
#FF1A1A
#FF3333
#FF4D4D
#FF6666
#FF8080
#FF9999
#FFB3B3
#FFCCCC
#FFE6E6
#FFFFFF
深色調
#E60000
#CC0000
#B30000
#990000
#800000
#660000
#4D0000
#330000
#190000
#000000
CSS 程式碼片段
為什麼要使用線上色彩選擇器？
最大的好處是省去切換工具的時間。前端開發者直接取得 HEX 或 HSL 值貼入 CSS，不用開其他程式。品牌設計師可以確認招牌色從 RGB 轉到 CMYK 後是否一致，螢幕和印刷墨水不一定匹配，重印代價很高。做無障礙設計的團隊根據 HSL 亮度值測試對比度。深色模式設計靠調整 L 值來建立色調階梯。常見的任務像是把品牌 HEX 轉成 CMYK 提供給印刷廠商，以前得開 Photoshop 才能做到。 MDN 色彩參考文件 列出了所有 CSS 格式及瀏覽器相容性資料。
HSL 和 HSV 有什麼區別？
HSL 把完全飽和的顏色放在 50% 亮度處，往 100% 推得到白色，往 0% 拉得到黑色。HSV 把同一個顏色放在 100% 明度，降低飽和度趨向白色，降低明度趨向黑色。實務上 HSL 更適合 CSS，因為固定的亮度步進能提供視覺上均勻的色調增量。HSV 是多數選色器介面的預設，對應到 2D 方形很直覺：飽和度左到右、明度上到下。設計師常用 HSV 漸層選起始色，再把 HSL 輸出貼進 CSS 變數。 MDN HSL 參考文件 提供了轉換數學和瀏覽器支援表。
常見問題
- 什麼是 HEX 色碼？
- HEX 色碼是 # 號後接六個十六進位字元。前兩位代表紅色，中間兩位代表綠色，最後兩位代表藍色——每組數值範圍從 00（無）到 FF（最大值）。因此 #FF0000 是純紅色，#FFFFFF 是白色。HEX 是 HTML 和 CSS 的標準格式，因為它簡短、易讀，且在所有瀏覽器中通用。
- 如何將 RGB 轉換為 HEX？
- 將每個 RGB 值（0 到 255）轉換為兩位十六進位數字，然後加上 # 前綴組合起來。RGB(255, 0, 128) 會變成 #FF0080，因為 255 是 FF，0 是 00，128 是 80。Atoolin 的色彩選擇器會自動完成轉換——調整 RGB 滑桿後，一鍵即可複製 HEX 值。
- CSS 應該使用哪種色彩格式？
- HEX 簡潔且通用性最佳。當需要在程式碼中產生色調變體時，改用 HSL——調整 L 值可得到可預測的亮度變化。需要透明度時使用 rgba()。oklch() 格式能感知性地調整顏色，有助於建立無障礙色板，但截至 2025 年瀏覽器支援仍不完整。
- 什麼時候應該使用 CMYK 而非 RGB？
- CMYK 用於印刷。印表機使用青色、洋紅色、黃色和黑色墨水，能重現的色域比螢幕上 RGB 顯示的範圍窄。如果您要印製名片、海報或包裝，請先轉換為 CMYK 並取得實體打樣——螢幕上看起來正確的顏色，印刷出來可能會有明顯差異。
所有處理皆在您的瀏覽器中完成，不會傳送任何資料至伺服器。