For years, web developers and UI designers had to juggle two completely different color formats. If a color was solid, we used a clean, simple 6-digit HEX code (like #FF0000). But the moment a designer asked for 50% opacity, we were forced to switch entirely to the bulky RGBA format (rgba(255, 0, 0, 0.5)).
Those days are over. The modern web standard allows you to add Alpha Transparency directly to your HEX codes. By simply appending two extra characters to the end of a standard hex code, you create an 8-Digit HEX Code (#RRGGBBAA).
In this comprehensive guide, we will break down exactly how these two extra "Alpha" characters work, the mathematical formula behind them, and provide you with a complete 0% to 100% conversion table. Want to see how it works right now? Play with our interactive Opacity Generator below!
🧪 Try It: 8-Digit Alpha HEX Generator
✦ What is an 8-Digit HEX Code? (#RRGGBBAA)
To understand an 8-digit hex code, you must first understand the standard 6-digit hex code. A traditional hex code is broken down into three pairs of characters representing Red, Green, and Blue (#RRGGBB).
An 8-digit hex code simply takes that standard format and tacks on a fourth pair of characters at the very end. This final pair is the Alpha channel (#RRGGBBAA), which controls the opacity (transparency) of the color.
Solid Base Color
Let's take a pure Red: #FF0000. This is 100% solid, fully opaque red.
The Alpha Value
We want this red to be exactly 50% transparent. In the hexadecimal system, 50% translates to the characters 80.
The Final 8-Digit Code
We combine them by placing the Alpha at the end. Our new code is #FF000080. You can now use this directly in CSS: background-color: #FF000080;
🧮 The Math Behind Alpha Hex Codes
In digital color, the scale goes from 0 (completely invisible) to 255 (completely solid). To figure out the alpha code for a specific percentage, we use a simple formula:
Formula: (Percentage / 100) * 255 = Decimal Value -> Convert to HexLet's calculate 75% Opacity:
- Divide 75 by 100 = 0.75
- Multiply by 255 = 191.25 (Round down to 191)
- Convert the decimal 191 into Hexadecimal = BF
So, a 75% transparent Black (#000000) becomes #000000BF.
Don't want to do the math? That is exactly why we created the cheat sheet table below!
📊 The Complete Alpha Hex Conversion Table
Here is the ultimate cheat sheet mapping Opacity Percentages (0% to 100%) to their exact 2-digit Alpha Hex values. Bookmark this page to reference these codes quickly during development.
| Opacity (%) | Alpha Hex Code | Example (Black) |
|---|---|---|
| 100% (Solid) | FF | #000000FF |
| 95% | F2 | #000000F2 |
| 90% | E6 | #000000E6 |
| 85% | D9 | #000000D9 |
| 80% | CC | #000000CC |
| 75% | BF | #000000BF |
| 70% | B3 | #000000B3 |
| 65% | A6 | #000000A6 |
| 60% | 99 | #00000099 |
| 55% | 8C | #0000008C |
| 50% (Half) | 80 | #00000080 |
| 45% | 73 | #00000073 |
| 40% | 66 | #00000066 |
| 35% | 59 | #00000059 |
| 30% | 4D | #0000004D |
| 25% | 40 | #00000040 |
| 20% | 33 | #00000033 |
| 15% | 26 | #00000026 |
| 10% | 1A | #0000001A |
| 5% | 0D | #0000000D |
| 0% (Invisible) | 00 | #00000000 |
🚀 Instantly Convert Colors
Don't want to memorize Alpha tables? Use our free Advanced Color Converter to instantly switch between RGBA, 8-Digit HEX, and HSL formats.
Open Color Converter →🆚 8-Digit HEX vs. RGBA: Which is Better?
In modern web development, #FF000080 and rgba(255, 0, 0, 0.5) accomplish the exact same goal: rendering a 50% transparent red. The browser parses them identically. So which one should you use?
Why developers prefer 8-Digit HEX:
- Consistency: If your entire design system and CSS variables are already written in HEX format, throwing in an
rgba()string breaks the visual consistency of your code. - Shorter Syntax:
#00000080takes up far less space in your stylesheet thanrgba(0, 0, 0, 0.5), leading to slightly smaller CSS files. - Figma Integration: Modern design tools like Figma default to HEX codes for colors and percentage sliders for opacity. Copying an 8-digit hex straight from Figma is faster than converting it to RGBA.
⚠️ The Ultimate Mistake: Android vs. Web Syntax
Web Browsers and Android handle the position of the Alpha characters differently:
- Web CSS (RRGGBBAA): The opacity dictates the last two characters. Example:
#FF000080. - Android / iOS (AARRGGBB): The opacity dictates the first two characters. Example:
#80FF0000.
If you put #FF000080 into Android, it reads the "FF" at the beginning as 100% solid opacity, and reads "000080" as a Dark Blue color. Always remember to move your Alpha Hex characters to the front if you are compiling for native mobile apps!
❓ Frequently Asked Questions
What is an 8-digit HEX code?
An 8-digit HEX code is a standard 6-digit color code with two extra alphanumeric characters added to the end. These last two characters represent the "Alpha" channel, which dictates the opacity (transparency) of the color.
How do you add 50% opacity to a HEX code?
To add exactly 50% opacity, append the hex value "80" to the end of your 6-digit HEX code. For example, if your base color is #000000 (Black), making it #00000080 will create a 50% transparent black overlay.
Are 8-digit HEX codes supported in all browsers?
Yes, as of modern web standards, 8-digit HEX codes (#RRGGBBAA) are fully supported across all major browsers including Google Chrome, Safari, Firefox, and Microsoft Edge. You no longer need to rely on RGBA fallbacks.
What is the difference between RGBA and 8-digit HEX?
They accomplish exactly the same visual result. RGBA uses base-10 numbers and a decimal for opacity (e.g., rgba(255, 0, 0, 0.5)), while 8-digit HEX uses base-16 alphanumeric characters (e.g., #FF000080). It is purely a syntax preference for developers.
Why is my 8-digit hex code not working in Android Studio?
Web CSS uses the format #RRGGBBAA (Alpha characters at the end). Android native development uses the format #AARRGGBB (Alpha characters at the beginning). You must manually move the two opacity characters to the front of the string for it to work in Android XML.