#RRGGBBAA: Browser Support, Syntax, Limitations

What is #RRGGBBAA hex notation?

#RRGGBBAA is the 8-digit hexadecimal color notation defined in the W3C CSS Color Module Level 4. The first six digits set red, green, and blue (00 to ff each), and the last two digits set the alpha channel from 00 (fully transparent) to ff (fully opaque). It works anywhere a CSS color is allowed.

Which browsers does #RRGGBBAA support?

#RRGGBBAA ships in every modern engine and the Web Platform Baseline marks it as Widely Available. The path to default-on support was uneven, with Chrome and Opera shipping it behind a flag for several releases before turning it on, and Internet Explorer and Opera Mini never adding it at all.

What is the syntax of #RRGGBBAA hex notation?

#RRGGBBAA is a hash symbol followed by exactly eight hex digits. The first six digits encode red, green, and blue (two digits each, 00 to ff). The last two digits encode the alpha channel, also 00 to ff, where 00 is fully transparent and ff is fully opaque. A four-digit short form (#RGBA) also works and the browser duplicates each digit.

• #RRGGBBAA (8-digit form): Two digits per channel. Example: #1e90ff80 is dodger blue at 50% alpha. Case-insensitive, so #1E90FF80 is the same color.
• #RGBA (4-digit short form): One digit per channel. The browser duplicates each digit to expand it, so #f09a equals #ff0099aa.
• Alpha range: 00 to ff in hex, equal to 0 to 255 in decimal and 0 to 1 in float. The alpha pair maps linearly: 80 hex equals 128 decimal which equals 0.502 in float.
• Where it works: Anywhere a CSS color is valid - background-color, color, border-color, box-shadow, fill, stroke, gradient color stops, and CSS custom properties typed as color.

/* 1. Basic 8-digit hex with alpha. */
.card {
    background-color: #1e90ff80; /* dodger blue at 50% alpha */
    border: 1px solid #00000033;  /* black at 20% alpha */
}

/* 2. Short 4-digit form. The browser duplicates each digit. */
.badge {
    background-color: #f09a; /* same as #ff0099aa */
}

/* 3. Detect support before shipping a fallback. */
@supports (color: #ff000080) {
    .toast {
        background-color: #ff000080;
    }
}

@supports not (color: #ff000080) {
    .toast {
        background-color: rgba(255, 0, 0, 0.5);
    }
}

How do you convert opacity percentage to hex alpha?

Hex alpha runs from 00 to ff (0 to 255 in decimal). Opacity in CSS runs from 0 to 1 (or 0% to 100%). Map between the two with a short, four-step calculation that you can do in your head, in DevTools, or in a one-liner script.

• Take the opacity value: Start with the alpha you want as a 0 to 1 float. 50% opacity is 0.5, 25% is 0.25, 100% is 1.
• Multiply by 255: Scale the float to the 0 to 255 byte range. 0.5 times 255 is 127.5.
• Round to the nearest integer: The hex pair must be a whole byte. 127.5 rounds to 128.
• Convert to two-digit hex: Use Number(128).toString(16) in DevTools to get "80". Pad to two digits if the result is a single character: 5 becomes 05, not 5.
• Append to the 6-digit color: Add the alpha pair to the end of #RRGGBB. So red at 50% alpha is #ff000080, and red at 25% alpha is #ff000040.

Quick reference for the values most teams use: 100% = ff, 75% = bf, 50% = 80, 25% = 40, 10% = 1a, 5% = 0d, 0% = 00. If the conversion looks wrong in the browser, paste the full color into DevTools and check that the parsed alpha matches your intended percentage.

What are the known issues with #RRGGBBAA?

#RRGGBBAA ships widely now, but several quirks still trip up teams. Most issues come from the IE and EdgeHTML support gap, the silent drop on older browsers, and tooling that does not normalize between the 4-digit and 8-digit forms.

• Silent drop on unsupported browsers: Internet Explorer, EdgeHTML, Opera Mini, and pre-2017 Safari and Chrome treat the 8-digit value as invalid and discard the entire declaration. The element then falls back to its default background, which is often plain white or transparent.
• No fallback chain in the cascade: Unlike rgba() pages that pair a hex color with a separate opacity rule, #RRGGBBAA collapses the two into one declaration. Add a paired rgba() rule above the hex rule if you need to keep the color visible on Internet Explorer or EdgeHTML.
• 4-digit form rounding: #RGBA expands each digit by duplication, so #abc1 expands to #aabbcc11, not to a true linear midpoint. Use the 8-digit form for any color where the alpha needs precise control.
• Color picker tools mismatch: Some legacy design tools export hex with a separate opacity slider rather than a single 8-digit string, so the value pasted into CSS does not include the alpha. Always confirm the alpha pair is present before shipping.
• Confusion with the legacy IE #AARRGGBB form: Old Internet Explorer filter syntax used #AARRGGBB (alpha first), which is the opposite order. Anything that still references the IE form has to be re-ordered before it works in modern browsers.
• Android WebView restrictions: Android WebView coverage of #RRGGBBAA is limited on apps targeting older Android API levels because of a documented Chromium issue, so apps that embed a WebView still need to test the value across the WebView versions they ship.

In my experience, the trap that bites teams hardest is shipping a translucent toast notification with #ff000080 in a design system, then watching it render as a fully opaque red on an internal IE tab the support team uses, because the entire background-color declaration was dropped and the cascade fell through to a hard-coded fallback color two stylesheets up.

Citations

All #RRGGBBAA version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - hex-color: developer.mozilla.org/en-US/docs/Web/CSS/hex-color
• MDN Web Docs - CSS color values: developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Color_values
• W3C CSS Color Module Level 4 - hex notation: w3.org/TR/css-color-4/#hex-notation
• CSS Color Module Level 4 editor's draft: drafts.csswg.org/css-color/#hex-notation
• Chrome Platform Status - 4 and 8 hex color values: chromestatus.com/feature/5685348285808640
• Bugzilla Mozilla - bug 567283 (Firefox tracking bug): bugzilla.mozilla.org/show_bug.cgi?id=567283
• Wikipedia - Web colors: en.wikipedia.org/wiki/Web_colors
• Wikipedia - RGBA color model: en.wikipedia.org/wiki/RGBA_color_model
• Web Platform Baseline: web.dev/baseline