跳到取色器

RGBA 轉 HEX 轉換器

貼上 RGBA 值,立即得到 HEX。其他格式也一樣能用。

辨識為 RGB

HEX 值#ff5733cc
HEX 轉 RGBA

去除透明度後的同一顏色(不透明 HEX)

調整顏色

11°
80%

68%
0.210
34°

其他所有格式

透明度對照表:HEX 透明度值與 RGBA

在 8 位數 HEX 中,最後兩位代表不透明度:FF 完全不透明,80 約為 50%,00 完全透明。表格以 5% 為間隔列出範例顏色。

不透明度HEX 透明度HEXRGBA
100%ff#ff5733rgba(255, 87, 51, 1)
95%f2#ff5733f2rgba(255, 87, 51, 0.95)
90%e6#ff5733e6rgba(255, 87, 51, 0.9)
85%d9#ff5733d9rgba(255, 87, 51, 0.85)
80%cc#ff5733ccrgba(255, 87, 51, 0.8)
75%bf#ff5733bfrgba(255, 87, 51, 0.75)
70%b3#ff5733b3rgba(255, 87, 51, 0.7)
65%a6#ff5733a6rgba(255, 87, 51, 0.65)
60%99#ff573399rgba(255, 87, 51, 0.6)
55%8c#ff57338crgba(255, 87, 51, 0.55)
50%80#ff573380rgba(255, 87, 51, 0.5)
45%73#ff573373rgba(255, 87, 51, 0.45)
40%66#ff573366rgba(255, 87, 51, 0.4)
35%59#ff573359rgba(255, 87, 51, 0.35)
30%4d#ff57334drgba(255, 87, 51, 0.3)
25%40#ff573340rgba(255, 87, 51, 0.25)
20%33#ff573333rgba(255, 87, 51, 0.2)
15%26#ff573326rgba(255, 87, 51, 0.15)
10%1a#ff57331argba(255, 87, 51, 0.1)
5%0d#ff57330drgba(255, 87, 51, 0.05)
0%00#ff573300rgba(255, 87, 51, 0)

RGBA 轉 HEX 範例

顏色RGBAHEX
rgba(255, 0, 0, 1)#ff0000
rgba(0, 255, 0, 1)#00ff00
rgba(0, 0, 255, 1)#0000ff
rgba(255, 255, 255, 1)#ffffff
rgba(0, 0, 0, 1)#000000
rgba(128, 128, 128, 1)#808080
rgba(255, 87, 51, 1)#ff5733
rgba(59, 130, 246, 1)#3b82f6
rgba(16, 185, 129, 1)#10b981
rgba(245, 158, 11, 1)#f59e0b
rgba(139, 92, 246, 1)#8b5cf6
rgba(236, 72, 153, 1)#ec4899

關於 RGBA 和 HEX

RGBA 是在 RGB 上加入代表不透明度的 Alpha 通道,寫作 rgba(255, 87, 51, 0.5)。Alpha 從 0(完全透明)到 1(完全不透明)。同樣的透明度也能寫成 8 位數 HEX,例如 #ff573380。

HEX 用兩位十六進位數字分別表示紅、綠、藍,例如 #ff5733。這是網頁和設計工具中最常見的顏色寫法。

轉換原理

我們讀取 RGBA 值,用 CSS Color 4 規範中的矩陣將它轉換為 CIE XYZ,再轉換為 HEX。超出目標色域的值會依 CSS Color 4 演算法映射:保留亮度和色相,降低彩度。

常見問題

如何將 RGBA 轉換為 HEX?

在上方欄位貼上或輸入 RGBA 值。PickShade 會在你輸入時用 CSS Color 4 公式即時轉換,點一下就能複製 HEX 值。

RGBA 轉 HEX 的結果精確嗎?

計算是精確的,結果只在顯示時四捨五入,保留的位數足以轉換回同一個顏色。如果顏色超出目標色域,PickShade 會提醒你,並顯示色域內最接近的顏色。

可以同時取得其他格式嗎?

可以。其他所有格式,包括 OKLCH、Display P3、Tailwind、SwiftUI、Flutter 和 Android,都列在結果下方,點一下就能複製。

這個轉換器免費嗎?

免費。不必註冊,而且完全在你的瀏覽器中執行。