Type an opacity percentage to get the two-digit HEX alpha suffix, the complete 8-digit #RRGGBBAA color and the matching rgba() value. Works the other way too: paste an alpha pair like CC to see what opacity it means.
Last updated:
Convert
%
0% = fully transparent, 100% = fully opaque
Two hex digits like 80 or CC, or a full #RRGGBBAA code
3- or 6-digit HEX; used for the 8-digit code and preview
Enter your values to see the result.
Advertisement
Advertisement
How to use the Hex Opacity Calculator
Choose the direction: opacity to HEX, or HEX alpha to opacity.
Enter the opacity (0-100%) or the two-digit alpha pair.
Add your base color to get the full 8-digit code and a preview.
Copy the result or download the full 0-100% table as CSV.
HEX opacity formula
A HEX alpha value is the opacity written on a 0-255 scale in base 16:
alpha = round(opacity% × 255 ÷ 100), then convert alpha to two hex digits (pad with a leading 0 below 16).
Going back: opacity% = alpha ÷ 255 × 100. For example CC = 12 × 16 + 12 = 204, and 204 ÷ 255 = 80%.
HEX opacity table
Every 5% step, shown on black (#000000). Swap the first six digits for any color you like; the tool above lists every single percent.
Opacity
HEX alpha
0-255
Black example
100%
FF
255
#000000FF
95%
F2
242
#000000F2
90%
E6
230
#000000E6
85%
D9
217
#000000D9
80%
CC
204
#000000CC
75%
BF
191
#000000BF
70%
B3
179
#000000B3
65%
A6
166
#000000A6
60%
99
153
#00000099
55%
8C
140
#0000008C
50%
80
128
#00000080
45%
73
115
#00000073
40%
66
102
#00000066
35%
59
89
#00000059
30%
4D
77
#0000004D
25%
40
64
#00000040
20%
33
51
#00000033
15%
26
38
#00000026
10%
1A
26
#0000001A
5%
0D
13
#0000000D
0%
00
0
#00000000
Tips for transparent colors
Use 8-digit HEX for overlays, borders and shadows where only the color should be see-through; use the opacity property to fade a whole element.
Design tools often show opacity as a percent while code needs HEX, which is why values like 1A (10%), 33 (20%), 80 (50%) and CC (80%) are worth remembering.
Android XML colors put alpha first (#AARRGGBB), so #802F6B4F there equals #2F6B4F80 in CSS.
Text placed on a translucent color should still meet contrast guidelines against the real background behind it.
Frequently asked questions
What is the HEX code for 50% opacity?
50% opacity is 80 in HEX. 50% of 255 is 127.5, which rounds to 128, and 128 in hexadecimal is 80. Black at 50% opacity is therefore #00000080.
How do I convert opacity to a HEX alpha value?
Multiply the opacity percentage by 255, divide by 100, round to the nearest whole number and convert it to two hexadecimal digits. For 75%: 75 × 255 ÷ 100 = 191.25, rounded to 191, which is BF.
Where does the alpha go in an 8-digit HEX color?
In CSS the alpha pair comes last: #RRGGBBAA. So #2F6B4FCC is the color #2F6B4F at 80% opacity. Android color resources use the opposite order, #AARRGGBB, with the alpha first.
Do all browsers support 8-digit HEX colors?
Yes. #RRGGBBAA and the 4-digit #RGBA shorthand are part of CSS Color Level 4 and work in all current versions of Chrome, Edge, Firefox and Safari. For very old browsers use rgba() instead.
Why is my opacity not exact?
The alpha channel has only 256 steps (00 to FF), so most percentages fall between two steps. 33% becomes 54, which is really 32.94%. The difference is far too small to see.
What is the difference between opacity and transparency?
They are opposites. 80% opacity means the color covers 80% and lets 20% of the background show through, which is 20% transparency. HEX alpha always stores opacity.
Is HEX alpha the same as the CSS opacity property?
Not quite. A HEX alpha only makes that one color translucent, for example a background, while the opacity property fades the whole element including its text and children.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.