HEX Color Opacity: 8-Digit HEX, RGBA and a Full Transparency Table

You have a brand color like #3B82F6 and you need it at 40% for an overlay, a focus ring or a soft border. HEX opacity is set by adding a two-digit alpha value to the end of the code, but those digits do not map neatly to percentages, so most people end up looking up values like "50% in hex" again and again. This guide explains how 8-digit HEX works, gives you a complete transparency table, and shows when rgba() or the opacity property is the better tool.

How HEX Opacity Works: The Alpha Channel

A standard HEX color has three pairs of hexadecimal digits for red, green and blue, each running from 00 (0) to FF (255). An 8-digit HEX code adds a fourth pair for alpha, the channel that controls transparency. The format is #RRGGBBAA, so #3B82F6 at full strength is #3B82F6FF, and the same blue at 40% opacity is #3B82F666.

The alpha pair uses the same 0–255 range as the color channels, not a 0–100 percentage. To turn a percentage into hex alpha:

1. Multiply the opacity by 255. For 40%: 0.40 × 255 = 102.
2. Round to the nearest whole number (102 is already whole).
3. Convert to two hexadecimal digits: 102 ÷ 16 = 6 remainder 6, so 66.

Awkward values work the same way. For 37%: 0.37 × 255 = 94.35, which rounds to 94, and 94 ÷ 16 = 5 remainder 14 (E), giving 5E. To go the other direction, convert the pair to decimal and divide by 255: B3 is 179, and 179 ÷ 255 ≈ 0.70, or 70%.

There is also a 4-digit shorthand, #RGBA, where each digit is doubled. #0008 expands to #00000088, which is black at about 53% opacity (136 ÷ 255). If the arithmetic feels tedious, the HEX opacity calculator lets you pick a base color, drag an opacity slider and copy the 8-digit HEX, rgba() and hsla() values while previewing the result over a checkerboard.

HEX Opacity Table: 100% to 0% in 5% Steps

Each row below uses alpha = round(opacity × 255), converted to hex. Append the two-digit value to any 6-digit color code.

Two details are worth knowing. First, 50% is 80, which is 128 ÷ 255, or about 50.2%. With only 256 possible alpha values, nothing lands exactly on half: 7F (49.8%) and 80 sit on either side of it. Nobody can see that difference, but it explains why converting #3B82F680 to rgba can give 0.5 or 0.502 depending on how many decimals a tool keeps. Second, the 10% steps (1A, 33, 4D, 66 and so on) are the ones you will reach for most, so they are worth memorizing.

#RRGGBBAA vs rgba(): Which Should You Use?

Both formats describe exactly the same color, so the choice comes down to readability and workflow:

• 8-digit HEX is compact and is often what design tools and token pipelines export. It works well when colors are stored as single strings, such as in a JSON token file.
• rgba() is easier to read and adjust. rgba(59, 130, 246, 0.4) tells you the opacity at a glance, while #3B82F666 needs a lookup.
• Modern rgb() syntax takes alpha after a slash: rgb(59 130 246 / 40%). In CSS Color Level 4, rgba() is simply a legacy alias of rgb(), and both forms work in all current browsers.

The biggest practical difference shows up with CSS custom properties. If --brand holds #3B82F6, you cannot glue an alpha suffix onto it. Use color-mix() instead, which is supported in all current major browsers:

:root {
  --brand: #3B82F6;
}

.badge {
  /* brand color at 40% opacity */
  background: color-mix(in srgb, var(--brand) 40%, transparent);
}

For a refresher on how the formats relate, read HEX, RGB and HSL color codes explained, and for the channel-by-channel math, see how to convert HEX to RGB.

Browser Support for 8-Digit HEX

The #RRGGBBAA and #RGBA notations come from CSS Color Level 4 and work in every current version of Chrome, Edge, Firefox and Safari. Firefox 49 and Safari 10 shipped support in 2016, Chrome 62 followed in 2017, and Edge gained it in version 79 when it moved to Chromium. Internet Explorer never supported it, so if a legacy browser is still on your support list, use rgba(), which has worked since IE9.

Outside the browser, check where the alpha goes before pasting a code:

• Android color resources use #AARRGGBB, alpha first. #66FF0000 is red at 40% on Android, but in CSS the same string is fully transparent, because the last pair, 00, is read as alpha.
• Design tools such as Figma usually show HEX and opacity in separate fields, so a copied 6-digit HEX value may not carry the opacity with it.
• HTML email clients render CSS inconsistently. Test before relying on any transparency there, and keep critical colors solid.

Opacity vs Alpha: Not the Same Thing

CSS gives you two ways to make something see-through, and they behave very differently.

Alpha in a color affects only the property that uses that color. A card with background: #FFFFFFB3 has a 70% opaque background, while its text, icons and border stay fully solid.

The opacity property fades the entire element, including every child, text node and image inside it. opacity: 0.7 on the same card makes the text 70% opaque too, which usually hurts readability. Any value below 1 also creates a new stacking context, which can change how z-index behaves for its children.

/* Only the background is translucent; text stays crisp */
.card-glass {
  background: #FFFFFFB3;
}

/* Everything fades: background, text and icons */
.card-faded {
  background: #FFFFFF;
  opacity: 0.7;
}

Use color alpha for overlays, translucent backgrounds, borders and shadows. Use opacity when you really want the whole element to fade, such as a disabled state or an enter and exit animation. If you need a solid button inside a translucent panel, put the alpha on the panel's background color rather than setting opacity on the panel, because a child can never be more opaque than its faded parent.

Transparent Colors and Contrast

A semi-transparent color has no fixed appearance: what you see is a blend of the color and whatever sits behind it. Browsers composite each channel like this:

result = alpha × foreground + (1 − alpha) × background

For example, black at 60% (#00000099) over white gives 0.6 × 0 + 0.4 × 255 = 102 on every channel, which is #666666. Over a dark photo, the same color looks almost black.

This matters for accessibility, because WCAG contrast ratios are calculated between solid colors. Work out the blended color first, then test it. In the example above, #666666 on white has a ratio of about 5.7:1, which passes WCAG AA for normal text. Run your own flattened values through the color contrast checker, and test semi-transparent text against both the lightest and the darkest background it can appear on.

Practical Patterns That Use HEX Alpha

• Image overlays: a black layer between 40% and 60% (#00000066 to #00000099) behind white headline text keeps it readable on busy photos.
• Borders and dividers: a border like #0F172A1A (10%) adapts to whatever surface it sits on, unlike a fixed light gray that can disappear on tinted backgrounds.
• Focus rings: your brand color at partial opacity makes a soft outline, but check that the ring still reaches 3:1 against the colors next to it, the WCAG minimum for non-text elements.
• Shadows: natural shadows are rarely pure black at full strength. A shadow color somewhere around 10–25% alpha usually looks right. The CSS box shadow generator has an opacity slider for exactly this, and our box shadow guide covers layering.
• Frosted glass: a white or tinted background at low alpha combined with backdrop-filter: blur() creates the glass look. The glassmorphism CSS generator outputs that combination, and the glassmorphism guide explains how to keep text legible on top of it.

Conclusion

HEX color opacity comes down to one extra pair of digits: multiply the opacity by 255, round, and convert to hex. Keep the table above handy for common steps, choose rgba() or modern rgb() when readability matters, save the opacity property for fading whole elements, and always check contrast against the blended result. For quick values, the HEX opacity calculator gives you all three formats at once, and the HEX to RGB converter turns any 8-digit code back into rgba().