色彩格式轉換

色彩格式轉換

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. 填入顏色值,HEX、RGB、HSL 都認。
  2. 結果同時給出其他幾種表示,並帶預覽色塊。
  3. 帶透明度的輸入會保留 alpha 通道。

注意事項

色彩空間轉換會四捨五入,來回轉一次可能有 1 的偏差。HSL 的色相 H 歸一到 0–360 度。

常見問題

HEX 顏色轉RGB時每個通道範圍是多少?
HEX轉RGB後,每個紅綠藍通道的範圍都是0到255。6位HEX用每2位表示1個通道,例如FF對應255;帶透明度時Alpha放在末尾,不能直接把其他系統的ARGB順序當成網頁顏色使用。
HSL 顏色中的色相360和0一樣嗎?
HSL色相按360度循環,所以0度與360度指向同一色相。飽和度和亮度使用百分比,範圍通常為0到100;相同色相在不同亮度下仍會呈現不同顏色,轉換結果是sRGB數值而非印刷色彩預測。
RGBA 透明度轉8位HEX為甚麼有誤差?
RGBA透明度轉HEX時會量化成8位整數,因此可能出現小幅捨入誤差。Alpha從0到1映射到0到255,例如0.5會捨入為128;反向轉換未必恰好回到原小數,預覽還會受到背景混合影響。

相關工具

色彩格式轉換 · HEX / RGB / HSL 互轉,附即時預覽與一鍵複製
色彩格式轉換 — 工具示意圖 · dayeku.com