Hex Opacity Calculator
Convert an opacity percentage to its 2-digit hex alpha suffix for use in 8-digit CSS hex colors (#rrggbbaa).
How to use this tool
- Set the opacity percentage (0–100).
- Enter the base 6-digit hex color.
- Copy the 8-digit hex (e.g. #3a86ffcc) into your CSS.
Modern CSS supports 8-digit hex colors (#rrggbbaa) where the last two digits represent the alpha channel. This tool converts an opacity percentage to that hex byte.
Formula
The 8-bit alpha value for an opacity percentage p is:
alpha = round(p / 100 × 255)
The two-digit hex alpha byte is the zero-padded hexadecimal representation of that integer. The full 8-digit CSS hex color is:
#RRGGBB + alpha_hex
For example, 50% opacity → round(0.50 × 255) = 128 → hex 80 → #rrggbb80.
How it works
The opacity percentage is clamped to 0–100, multiplied by 255/100, and rounded to the nearest integer to produce an 8-bit alpha value. That integer is converted to a two-digit hex string (zero-padded if below 0x10). The base hex color is expanded from 3-digit shorthand if necessary, then the alpha byte is appended to give a full 8-character CSS hex color.
Common mistake: mistaking the 8-digit #RRGGBBAA format (alpha in the last byte) for the older 8-digit #AARRGGBB format used in some Android and Windows APIs. CSS and most modern web tools use #RRGGBBAA, but Android's Color.parseColor and some legacy systems expect #AARRGGBB — using the wrong byte order causes the alpha to be interpreted as a color channel and vice versa.
Worked example
Convert 50% opacity to a hex alpha byte for #ff0000
- Clamp opacity: 50% is within 0–100.
- Compute alpha integer: round(50 / 100 × 255) = round(127.5) = 128.
- Convert to hex: 128 in hex is '80' (two digits, no padding needed).
- Append to base color: #ff0000 + 80 = #ff000080.
Alpha hex byte: 80 | Full 8-digit hex: #ff000080 | Alpha value: 128
Common mistakes to avoid
- Placing the alpha byte first (#aarrggbb) instead of last (#rrggbbaa) -- browsers use the trailing-alpha 8-digit format, while Android uses leading-alpha.
- Rounding down instead of rounding to nearest integer, which makes 50% opacity map to 0x7F (127) rather than the more precise 0x80 (128).
- Using a 6-digit hex code and trying to append the alpha suffix -- the base color must already be in #rrggbb form before the alpha byte is appended.
Key terms
- Alpha channel
- A fourth color channel that encodes transparency. A value of 255 (0xFF) means fully opaque; 0 means fully transparent; 128 (0x80) means approximately 50% transparent.
- #RRGGBBAA
- An 8-digit CSS hex color format where the last two characters represent the alpha (opacity) byte. Supported in CSS Color Level 4 and all modern browsers.
- Opacity vs. transparency
- Opacity and transparency are inverses. 100% opacity = fully visible (alpha 255); 0% opacity = fully invisible (alpha 0). Some older APIs define the parameter as transparency rather than opacity, reversing the scale.
- 8-bit alpha
- Alpha represented as an integer 0–255. When expressed as a hex byte it ranges from 00 (transparent) to FF (opaque). The mapping from percent to 8-bit is: alpha = round(percent / 100 × 255).
Frequently asked questions
- What is an 8-digit hex color?
- #rrggbbaa where aa is the alpha channel: 00 = fully transparent, ff = fully opaque. Supported in CSS Color Level 4.
- Is 50% exactly 0x80?
- 50% × 255 = 127.5, which rounds to 128 = 0x80. The visual difference from 127 is imperceptible.