Skip to main content
CoolColor Space

HEX to RGBA

Enter a hex color and set the opacity. You get CSS rgba(), the 8-digit hex that CSS also accepts, and the alpha-first form Android and Flutter use, each ready to copy. Then try the color as a tint over your own photo or video and download it.

%

On a checkerboard

Alpha byte 128 (0x80) = 50.2% opaque.

Flattened on white and on black

#FFAB99 and #802C1A: the opaque colors you get once it is drawn.

CSS rgba()rgba(255, 87, 51, 0.5)
CSS rgb() with slashrgb(255 87 51 / 50%)
CSS 8-digit hex (#RRGGBBAA)#FF573380
Android (#AARRGGBB)#80FF5733
FlutterColor(0x80FF5733)
Opaque hex, no alpha#FF5733

Input read as #RRGGBB.

Stays in your browser, nothing is uploaded.

How the conversion works

A hex color is three bytes written in base 16: red, green and blue, each from 00 to FF (0 to 255). rgba() writes the same three numbers in decimal and adds the alpha, the opacity, as a number from 0 to 1. So #FF5733 at 50% is rgba(255, 87, 51, 0.5).

The 8-digit form stores the alpha as a fourth byte. CSS Color Module Level 4 puts it last (#RRGGBBAA), where 00 is fully transparent and FF fully opaque. The Android Color class reads #AARRGGBB, alpha first, and Flutter writes Color(0xAARRGGBB). A byte has 256 steps, so an opacity such as 50% becomes 128/255 = 50.2% once stored in hex; the tool shows that stored value.

Hex transparency table

The alpha byte for each opacity: 100% is FF, fully opaque; 0% is 00, fully transparent. In CSS it goes after the color (#FF573380), on Android before it (#80FF5733). Each value is the opacity times 255, rounded to the nearest whole number, so 50% is 128 (80), not 127.5.

OpacityHex byteDecimal
100%FF255
95%F2242
90%E6230
85%D9217
80%CC204
75%BF191
70%B3179
65%A6166
60%99153
55%8C140
50%80128
45%73115
40%66102
35%5989
30%4D77
25%4064
20%3351
15%2638
10%1A26
5%0D13
0%000
Every percentage from 100 to 0
OpacityHex byteDecimal
100%FF255
99%FC252
98%FA250
97%F7247
96%F5245
95%F2242
94%F0240
93%ED237
92%EB235
91%E8232
90%E6230
89%E3227
88%E0224
87%DE222
86%DB219
85%D9217
84%D6214
83%D4212
82%D1209
81%CF207
80%CC204
79%C9201
78%C7199
77%C4196
76%C2194
75%BF191
74%BD189
73%BA186
72%B8184
71%B5181
70%B3179
69%B0176
68%AD173
67%AB171
66%A8168
65%A6166
64%A3163
63%A1161
62%9E158
61%9C156
60%99153
59%96150
58%94148
57%91145
56%8F143
55%8C140
54%8A138
53%87135
52%85133
51%82130
50%80128
49%7D125
48%7A122
47%78120
46%75117
45%73115
44%70112
43%6E110
42%6B107
41%69105
40%66102
39%6399
38%6197
37%5E94
36%5C92
35%5989
34%5787
33%5484
32%5282
31%4F79
30%4D77
29%4A74
28%4771
27%4569
26%4266
25%4064
24%3D61
23%3B59
22%3856
21%3654
20%3351
19%3048
18%2E46
17%2B43
16%2941
15%2638
14%2436
13%2133
12%1F31
11%1C28
10%1A26
9%1723
8%1420
7%1218
6%0F15
5%0D13
4%0A10
3%088
2%055
1%033
0%000

Related

HEX to RGBA: questions

How do I convert hex to rgba?
Split the six hex digits into three pairs and read each pair as a number from 0 to 255: #FF5733 is red 255, green 87, blue 51. Then add the opacity as a number from 0 to 1: at 50% that is rgba(255, 87, 51, 0.5).
How do I add transparency to a hex color?
Add a seventh and eighth digit: the alpha byte. #FF573380 is #FF5733 at about 50%. All current browsers read 8-digit hex in CSS. The table on this page gives the byte for every percentage.
Why is 50% opacity 80 and not 7F?
The byte is the opacity times 255, rounded: 0.5 × 255 = 127.5, which rounds to 128, and 128 in hex is 80. Some tables truncate instead and give 7F (127). The difference is under half a percent and not visible.
Is the alpha first or last?
In CSS and in most web tools it is last: #RRGGBBAA. Android color strings and Flutter Color(0x…) values put it first: #AARRGGBB. The same eight digits mean different colors in the two orders, so check which one your platform expects.
What does a transparent color look like once it is drawn?
It depends on what is behind it. The tool shows it flattened on white and on black: the opaque colors you would pick with an eyedropper from a screenshot.
How do I put a color overlay on a photo or video?
Under the codes, press “Preview this color on your photo or video” and pick a picture or a clip: the color is laid over it at the opacity you set, like a tint or a color filter, and you can download the result. A photo is saved as JPG if you gave a JPG and as PNG otherwise; a video is saved as MP4 or WebM, whichever your browser can record. A video is re-recorded in real time in your browser, with sound where the browser allows it. The file is not uploaded anywhere.

Sources

  1. W3C. CSS Color Module Level 4, §5.2 «The RGB hexadecimal notations»: in 8-digit hex the last pair is the alpha, 00 fully transparent, ff fully opaque (Candidate Recommendation Draft, 3 November 2026). Link
  2. Android Developers. android.graphics.Color: color ints are ARGB (alpha in the highest 8 bits); parseColor accepts #RRGGBB and #AARRGGBB. Link
  3. Flutter API. Color constructor: bits 24–31 are the alpha, written Color(0xAARRGGBB). Link