跳到主要內容
CrateX.app 標誌

CrateX.app

顏色格式轉換

顏色格式轉換

顏色格式轉換支援 HEX、RGB、HSL、CMYK 互轉，提供即時預覽、取色器與同步換算，適用於設計交付、CSS 樣式編寫與色票校對。

HEX

#

RGB

HSL

CMYK
顏色格式轉換

快速開始

1
選擇/輸入：可輸入任一格式（如 #1E90FF、rgb(30,144,255)、hsl(210,100%,56%)），或使用取色器
2
自動轉換：輸入任一格式後，其餘格式即時更新
3
複製：點擊各格式後方的複製按鈕以取得標準化字串

常見使用情境

設計交接

將設計稿的 HEX 轉為 CSS 的 RGB/HSL 以供開發

風格指南

統一元件庫的顏色格式與書寫風格

印刷參考

將螢幕色轉為 CMYK 作為初步估算（需打樣確認）

無障礙

透過預覽進行對比初查（精確比值請使用專門工具）

補充場景

RGB 轉 HSL、HSL 轉 RGB、顏色代碼轉換 也可在同一流程中完成，便於在複製、匯出或交付前快速核對結果。

轉換參數與顯示

輸入規則：HEX 僅支援 6 位（不含 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 近似：換算僅供參考，嚴謹印刷需 ICC 設定與專業流程
不含 Alpha：本工具不處理透明通道

隱私與安全

所有處理都在瀏覽器本地完成，目前內容可隨時替換、清空並重新處理。

常見問題

5

可繼續使用這些相關工具，完成後續步驟。