HEX 轉 RGBA

這是 HEX 轉 RGBA 轉換器。把設計稿裡的 HEX 轉成 CSS 用的 rgb() / rgba()。透明度可以是 0–1、0–255 或百分比。#FF573380 就是 rgba(255, 87, 51, 0.5)。

示例，點色塊填入

點一下即可複製

一次轉多顆顏色。每列一個，也可以寫成 #3B82F6, #FF573380。點填入示例會填三列，下面出現對照表。

HEX 轉 RGBA

這是 HEX 轉 RGBA 轉換器：把設計稿裡的 HEX 轉成 CSS 用的 rgb() / rgba()。支援 3 位 #F53、6 位 #FF5733、帶透明的 8 位 #FF573380。#FF573380 就是 rgba(255, 87, 51, 0.5)。旁邊的 HEX 轉 RGB 沒有透明通道；HSL 和對比度請用顏色轉換。

如何使用

  1. 貼上 HEX、HEX8、rgb()、rgba()，或 255，87，51 這種中文逗號清單。短寫 #F53 會展開成 #FF5533。
  2. 拖 R、G、B、A 滑桿，或改數字框。透明度可選 0–1、0–255 或百分比。
  3. 點通道晶片只複製那一項。rgb() / rgba() / CSS 變數旁的複製會複製該行。複製結果複製 rgba()。
  4. 顯示示例填入 #FF573380。下面示例色塊是 #FF5733、#F53、#FF573380、#3B82F6、#00000080 和全透明白。
  5. 從螢幕取色在瀏覽器支援 EyeDropper 時出現。批次一行一個或逗號分隔。全部清除會清空。

注意事項

8 位 HEX 最後兩位是透明度：十六進位 80 是 128，128/255 ≈ 0.502，不是整的 0.5。透明度為 1 時 CSS 變數用 6 位 HEX，否則用 HEX8。也接受 rgba(255 87 51 / 50%) 這種寫法，以及全形逗號。非法 HEX 會提示，不會把例外丟到頁面上。相關：HEX 轉 RGB、透明度疊底、顏色轉換。

用在哪裡

  • 把 Figma 的 HEX 寫成 CSS 遮罩用的 rgba()。
  • 核對短寫 #RGB 展開後的通道。
  • 複製單個通道，或 --color 變數，貼進樣式表。

常見問題

短寫 #F53 能用嗎？

可以。每位加倍：#F53 變成 #FF5533，再轉成 rgb(255, 85, 51)。

HEX 的 80 為什麼不是透明度 0.5？

0x80 是 128。128 ÷ 255 ≈ 0.502。按位元組或百分比想，就把透明度切到 0–255 或 %。

這和十六進位轉十進位一樣嗎？

不一樣。顏色 HEX 是三個或四個通道。任意整數請用 HEX 轉十進位。