How to use the hex opacity calculator
- Choose Percent to hex or Hex to percent.
- Enter the opacity from 0 to 100, or the two digit hex alpha from 00 to FF.
- Optionally enter a six digit hex color such as #FF0000 to build the full eight digit code and an rgba() value.
- Copy the code. The table lists common percentages.
Formula
alpha byte = round half up of (opacity % x 255 / 100)
hex alpha = the byte written as two base 16 digits
opacity % = alpha byte / 255 x 100
Eight digit hex color is #RRGGBBAA, where AA is the alpha byte. 00 is fully transparent and FF is fully opaque.
80 percent red
80% of 255 is 204, and 204 in base 16 is CC. So 80% opacity is CC, and the color #FF0000 becomes #FF0000CC. As rgba() it is rgba(255, 0, 0, 0.8).
50% of 255 is 127.5, which rounds half up to 128, written 80. Converting 80 back gives 128 / 255 x 100 = 50.2%, which shows why the round trip can differ by a fraction of a percent.
Why 255 and rounding matter
An alpha value is stored in one byte, so there are 256 possible levels from 0 to 255, not 101. Only a few percentages land exactly on a byte. Others, such as 33%, give 84.15, which rounds to 84, written 54. This tool uses round half up, so a value ending in .5 goes up.
Some tools truncate instead of rounding, and some design programs use their own tables, so you may see a one step difference in another tool. Both are valid, since the difference is below what the eye can tell.
Where eight digit hex works
Eight digit hex colors are part of the CSS color specification and are supported in current browsers, and four digit shorthand (#RGBA) exists too. Older systems and some design tools only accept rgba(), which is why the result is shown in both forms. Opacity applied to a color in this way affects only that color, while the CSS opacity property fades the whole element, text and children included.
Pick colors with the color picker, check legibility with the color contrast checker, and add effects with the text shadow generator or the box shadow generator.
Assumptions and limits
- Opacity is a percent from 0 to 100 and hex alpha is two hex digits.
- The byte is the opacity times 255 divided by 100, rounded half up.
- Color input must be six hex digits, with or without the # sign.
- Results assume the eight digit hex notation #RRGGBBAA.
Frequently asked questions
What is the hex code for 50 percent opacity?
It is 80. Half of 255 is 127.5, which rounds up to 128, and 128 in hex is 80.
How do I add opacity to a hex color?
Add the two digit alpha after the six digit color. For 80% red write #FF0000CC.
Why does 100 percent give FF?
100% of 255 is 255, which is FF in hex, the highest possible alpha value, meaning fully opaque.
Can I convert an alpha code back to a percent?
Yes. Choose Hex to percent and enter the two digits. The tool divides the value by 255 and shows the percent.