顏色格式轉換
在瀏覽器本機將單一顏色在 6 位元 HEX、RGB、HSL、CMYK 之間互轉,支援取色器、隨機顏色、即時預覽、通道微調與 CSS 可複製字串。
HEX
#
RGB
R
G
B
HSL
H
S
L
CMYK
C
M
Y
K
顏色格式轉換輸入 6 位元 HEX 或 RGB/HSL/CMYK 通道使用取色器或隨機色,再查看同步值複製 HEX、RGB、HSL 或 CMYK CSS 字串
快速開始
1
2
3
常見使用情境
設計交接
將設計稿的 HEX 轉為 CSS 的 RGB/HSL 以供開發
風格指南
統一元件庫的顏色格式與書寫風格
印刷參考
將螢幕色轉換為 CMYK 作為印刷初步估算,最終需結合打樣與印刷流程確認
無障礙
預覽僅適合做顏色視覺初查,精確比例請使用專門的對比度工具
轉換參數與顯示
輸入規則:HEX 僅支援 6 位元(#RRGGBB,不支援 #RGB、#RGBA、#RRGGBBAA 或 Alpha);RGB 為 0–255;H 為 0–360;S/L 為 0–100;CMYK 為 0–100。輸入不區分大小寫
預覽行為:桌面端右側即時預覽;行動端為輕量模式,不顯示預覽
取色器:點擊各卡片右上角的調色盤按鈕開啟色盤
HEX 大寫策略:輸出統一為大寫(如 #1E90FF),輸入不分大小寫;無大小寫切換
微調:按住通道字母左右拖動可微調(Shift×10,Alt÷0.1)
複製輸出:複製按鈕輸出標準化字串(HEX 統一大寫)
使用建議
精度意識:sRGB 與裝置色彩管理差異可能造成取色值略有不同
透明度:目前格式不含 Alpha;需透明度請用 rgba()/hsla() 或獨立維護
色彩空間:Web 預設 sRGB;在 P3/Display‑P3 廣色域需謹慎驗證
團隊一致:約定 CSS 的標準顏色格式(如 HSL)
限制與相容性
裝置差異:不同顯示器/瀏覽器/系統的色彩管理不同,實際觀感可能差異
CMYK 近似:CMYK 值受 ICC 配置、紙張、油墨、設備與打樣流程影響;本頁僅作參考,並非可直接交付印刷的最終值
不含 Alpha:本工具不處理透明通道、rgba()、hsla()、#RGBA 或 #RRGGBBAA 值
CSS 顏色子集:CSS 命名顏色、transparent、currentColor、HWB、HSV/HSB、Lab、LCH、OKLab、OKLCH、Display-P3、device-cmyk()、relative colors、color-mix() 與 contrast-color() 不在本工具範圍內。
不做圖片或色板工具:本頁不支援圖片取色、螢幕取色、色板產生、漸層產生、對比度計算、CSS 變數匯出或 design token 匯出
隱私與安全
處理在瀏覽器中完成。目前顏色、通道值、輸出設定、小數精度、大寫 HEX 偏好、預覽偏好和最近顏色清單可能保留在目前瀏覽器工作階段或瀏覽器儲存中。若你儲存工作區或啟用 WebDAV 同步,目前顏色和設定可能依你的同步設定儲存;最近顏色不會透過 WebDAV 同步。HEX、RGB、HSL、CMYK 字串會由目前顏色和設定重新計算,不會作為單獨結果儲存。本頁不讀取圖片、不取樣螢幕、不抓取 URL,也不會把顏色送到服務端轉換。在共用裝置上,必要時清空顏色、設定和站台資料。
常見問題
暫不支援 #RGB,請使用 6 位 HEX(#RRGGBB)。
RGB 為 0–255;H 為 0–360,S/L 為 0–100%
CMYK 會受紙張、墨水、裝置和 ICC 設定影響;這裡的數值只是近似。支援把 CMYK 反算到 HEX/RGB 作為參考,但正式印刷仍需要 ICC 配置和打樣。
暫不支援 Alpha;請使用 rgba()/hsla() 或另行維護透明度。
受色彩管理、渲染算法、螢幕校正等影響;本工具以 sRGB 為基礎計算,結果僅供參考。
目前基於 sRGB 計算;在 P3 或 Display-P3 等廣色域場景下,需結合目標裝置、瀏覽器與 ICC 配置謹慎驗證。