Hex顏色到RGBA顏色在線轉換工具
RGBA顏色
關於Hex顏色到RGBA顏色在線轉換工具:
這個在線Hex顏色到RGBA顏色轉換工具可幫助您將一個Hex顏色轉換為RGBA顏色(包括透明度Opacity), 並實時測試您選擇的顏色.
Hex顏色系統:
HTML的顏色系統可以用16進制的數字表示,從#000000 (純黑色) to #FFFFFF (純白色).例如, #123456代表紅色通道是"12" (在"00"到"FF"之間).綠色通道是"34",藍色通道是"56". Hex顏色系統也支持簡化顯示,例如#e1a和#ee11aa是等價的.
RGBA顏色系統:
RGBA顏色系統中"R"代表紅色通道("Red"), "G"代表綠色通道("Green"), "B"代表藍色通道("Blue"),A代表透明度(Opacity).例如rgba(16,110,190,0.7) .
如何進行Hex顏色到RGBA顏色轉換?
步驟1: 分別獲得Hex顏色的紅色通道值,綠色通道值,藍色通道值和透明度值.
步驟2: 把顏色通道值從16進制轉換為10進制.
步驟3: 按RGBA顏色系統語法把3種顏色通道值組合起來.
例1:把Hex顏色"#106ebe" (透明度80%)轉換為RGBA顏色(結果是"rgba(16,110,190,0.8)"):
| Step 1: | Hex Color "#106ebe": Red(0x10), Green(0x6e), Blue(0xbe) |
| Step 2: | Red: (0x10)->(16), Green: (0x6e)->(110), Blue: (0xbe)->(190) |
| Step 3: | Hex Color "#106ebe" opacity 80% -> rgba(16,110,190,0.8) |
例1:把Hex顏色"#ea3" (透明度100%)轉換為RGBA顏色(結果是"rgba(238,170,51,1)"):
| Step 1: | Hex Color "#ea3" -> "#eeaa33" |
| Step 2: | Hex Color "#eeaa33": Red(0xee), Green(0xaa), Blue(0x33) |
| Step 3: | Red: (0xee)->(238), Green: (0xaa)->(170), Blue: (0x33)->(51) |
| Step 4: | Hex Color "#ea3", opacity 100% -> rgba(238,170,51,1) |
鏈接:
維基百科(Web顏色系統): https://en.wikipedia.org/wiki/Web_colors
維基百科(RGBA顏色系統): https://en.wikipedia.org/wiki/RGBA_color_space
用Python進行Hex顏色到RGBA顏色轉換:
import re
def rgba_to_hex(rgba_color):
rgb_color = re.search('\(.*\)', rgba_color).group(0).replace(' ', '').lstrip('(').rstrip(')')
[r, g, b, o] = rgb_color.split(',')
[r, g, b] = [int(x) for x in [r, g, b]]
o = float(o) * 100
o = str(o) + '%'
# check if in range 0~255
assert 0 <= r <= 255
assert 0 <= g <= 255
assert 0 <= b <= 255
r = hex(r).lstrip('0x')
g = hex(g).lstrip('0x')
b = hex(b).lstrip('0x')
# re-write '7' to '07'
r = (2 - len(r)) * '0' + r
g = (2 - len(g)) * '0' + g
b = (2 - len(b)) * '0' + b
hex_color = '#' + r + g + b + ', with opacity:' + o
return hex_color
rgba_input = 'rgba(7,110,190,0.95)'
hex_output = rgba_to_hex(rgba_input)
print('Hex color result is:{0}'.format(hex_output))
-------------------
Hex color result is:#076ebe, with opacity:95.0%