顏色預覽
HEX
#4f46e5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
HSV
hsv(243, 69%, 90%)
工具說明
關於顏色轉換器
Color Converter 用來在 HEX、RGB、HSL 與 HSV 之間換算色值，適合前端樣式、設計標註與主題變數整理。
輸入 #4f46e5、rgb(...) 或 hsl(...) 後，工具會正規化為常用格式，並顯示可複製結果。
如何使用 Color Converter
- 貼上 HEX、RGB、RGBA、HSL 或 HSLA 色值。
- 點擊轉換，查看 HEX、RGB、HSL 與 HSV 輸出。
- 用色塊 preview 確認顏色，再複製單一格式或全部格式。
常見使用場景
- 把設計稿中的 HEX 轉成 CSS rgb() 或 hsl()。
- 透過 HSL 調整亮度與飽和度，快速試 hover 色。
- 整理主題 token 時統一大小寫與格式。
色值格式與注意事項
HEX、RGB、HSL 與 HSV 是同一顏色的不同座標。現在的轉換保留 RGB 顏色本身，RGBA/HSLA 輸入的 alpha 會被接受但不會保留在輸出。
- 3 位 HEX 會展開為 6 位 HEX。
- RGB 通道必須在 0 到 255 之間。
- HSL 的 S/L 使用百分比，H 會依 0 到 360 度循環。
- HSV 常用於色彩選擇器，HSL 更常用於 CSS 主題微調。
顏色轉換常見問題
- 支援 HEX to RGB 與 RGB to HEX 嗎？
- 支援。輸入 HEX 會得到 RGB/HSL/HSV，輸入 RGB 也會得到 HEX/HSL/HSV。
- 為什麼 alpha 沒有輸出？
- 此工具目前聚焦不透明色的格式換算，RGBA/HSLA 的 alpha 會被忽略。
- 顏色會上傳嗎？
- 不會。解析、轉換與複製都在瀏覽器本機完成。
色彩轉換與可讀性
格式轉換不會自動保證對比度。用於按鈕、正文或連結前，仍要在真實背景上檢查 WCAG 對比度、品牌一致性與狀態色。
CSS 色彩格式選擇指南
同一個顏色可以寫成 HEX、RGB、HSL 或 HSV，但不同格式適合不同維護場景。
- 設計交付與靜態 token 常用 HEX，短且穩定。
- 需要透明度或動態組合時，CSS rgb() / hsl() 更方便。
- 做 hover、active、淺深變體時，HSL 的 hue、saturation、lightness 比直接改 RGB 更好控制。
上線前的色彩可及性檢查
色彩轉換只保證數值等價，不保證文字可讀、狀態清楚或 contrast 達標。
- 正文與按鈕文字要在真實背景上檢查 WCAG 對比度。
- 不要只靠顏色表達錯誤、成功或 disabled 狀態，還要有文字、icon 或形狀差異。
- 品牌色用於 links 或 focus ring 時，要同時檢查 hover、active、disabled 與 highlight 狀態。