色彩格式轉換
HEX / RGB / HSL 互轉，附即時預覽與一鍵複製
輸入 HEX、rgb() 或 hsl() 顏色即可預覽和轉換；透明度會顯示在支持 Alpha 的輸出格式中。
| HEX | ||
|---|---|---|
| RGB | ||
| HSL |
範例
輸入
#ff000080
示例結果
rgba(255, 0, 0, 0.502) hsla(0.0, 100.0%, 50.0%, 0.502)
80 的十六進制值為 128，Alpha 是 128/255，略大於 0.5。
技術細節與邊界
RGB 通道使用 0–255，HSL 色相按 360 度循環，飽和度與亮度使用百分比。HEX 的 Alpha 位在末尾，不是 ARGB；透明度轉為 8 位時會四捨五入。本工具使用 sRGB 數值轉換，不計算印刷 CMYK、ICC 色彩管理或 WCAG 對比度。
關於此工具
在 HEX、RGB/RGBA 與 HSL/HSLA 之間轉換顏色，並實時顯示色塊。適合對照設計稿、調整 CSS 顏色及檢查透明度；支持常見短十六進制和含 Alpha 的格式。
適用場景
- 設計稿給了 HSL，前端要用 HEX 或 RGBA。
- 批次把設計系統裡的 CSS 變數換成另一種寫法。
- 快速看一個色號的實際觀感。
注意事項
色彩空間轉換會四捨五入，來回轉一次可能有 1 的偏差。HSL 的色相 H 歸一到 0–360 度。
常見問題
- 短寫 `#f00` 和 `#ff0000` 一樣嗎？
- 一樣。`#RGB` 等價於把每位再複製一次得到 `#RRGGBB`。
- HSLA 的 alpha 支援百分號嗎？
- 支援。可以是 0-1 的小數或 0%-100%。
- 為甚麼反復轉換後數值略有變化？
- RGB 通道和 HEX Alpha 是離散整數，HSL 輸出也會保留有限小數。往返轉換會有捨入誤差，應保留原始設計值作為基準。
- 顏色預覽是否代表疊加背景後的最終顏色？
- 不是，半透明顏色會與所在背景混合。相同 RGBA 值放在不同背景上看起來可能不同；應在目標頁面背景中再次核對。
