Need a translucent version of a solid hexadecimal color for your stylesheet? A hex to rgba converter turns a six-digit color code such as #E4572E into rgba(228, 87, 46, 0.35), so you can add transparency to any brand color without touching the original swatch. This guide shows you the exact math, the conversion tables, and the CSS patterns that use them.
Hex to RGBA Converter
Hex to RGBA Converter. Enter your Hex Color and an alpha percentage, and the Hex to RGBA Converter instantly returns your RGBA Output. For mixed notation input, the binary to octal converter handles negative signs, a 0b prefix and fractional parts, and converts several numbers when each sits on its own line.
- Enter your values
- Copy the result
- Runs 100% in your browser
- Results update as you type
- No sign-up, nothing you type is uploaded
How a hex to RGBA converter works
A hex value stores a color as three pairs of hexadecimal digits in the #RRGGBB layout, with a leading hash in front. Each pair holds the intensity of one channel, red, green or blue, from 00 (none) to FF (full). RGBA keeps the same three components in plain decimal numbers from 0 to 255 and adds a fourth one, the alpha channel, written as a number between 0 and 1. Developers working on protocols, graphics or memory layouts can use the hex bitwise calculator for the programming tasks that involve masks, shifts and logic on integers.
The converter therefore does three small jobs: it splits the hex code into pairs, it turns each pair into a decimal number, and it appends the opacity you choose. Because everything runs on simple arithmetic, the tool can show the result instantly, right in your browser, as you type.
Red, green and blue components
The first pair controls red, the second green and the third blue. A pair with a high value means a strong contribution from that channel. Pure white is #FFFFFF, where all three pairs are at their maximum, and pure black is #000000, where all three are zero.
Alpha channel and opacity
The alpha channel is the fourth number in rgba(). A value of 1 means fully solid, 0 means fully transparent, and 0.35 means the color lets 65% of the background show through. Many people call the same idea opacity and think of it as a percentage, so 35% opacity equals an alpha of 0.35.
Shorthand 3-digit and 8-digit hex
Three input lengths are common. A 3-digit code doubles each digit, so #3C9 expands to #33CC99, which is rgba(51, 204, 153, 1). A 6-digit code carries no transparency, so the alpha defaults to 1. An 8-digit hex code adds a fourth pair for alpha, and that pair takes precedence over any separate opacity field.
Convert hex to RGBA: formula and worked example
Every pair of hexadecimal digits follows one rule: multiply the first digit by 16 and add the second. Letters count as numbers, with A as 10 up to F as 15. The alpha value is simply the opacity percentage divided by 100.
$$R = 16 \times d_1 + d_2 \qquad A = \frac{\text{opacity}\ \%}{100}$$Take the color #E4572E at 35% opacity. The table shows each step of the arithmetic.
| Channel | Hex pair | Calculation | Decimal value |
|---|---|---|---|
| Red | E4 | 14 × 16 + 4 | 228 |
| Green | 57 | 5 × 16 + 7 | 87 |
| Blue | 2E | 2 × 16 + 14 | 46 |
| Alpha | 35% opacity | 35 ÷ 100 | 0.35 |
The converted result is rgba(228, 87, 46, 0.35). To write the same color as one 8-digit code, multiply the alpha by 255 (0.35 × 255 = 89.25), round to 89, and write 89 as the hexadecimal pair 59. That gives #E4572E59.
Converting by hand in JavaScript
Developers who want to unpack a hex code inside their own app need only a few lines. This function strips the hash, expands 3-digit input, and uses parseInt with a radix of 16 on each substring.
function hexToRgba(hex, alpha) {
let h = hex.replace('#', '');
if (h.length === 3) {
h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
}
const r = parseInt(h.substring(0, 2), 16);
const g = parseInt(h.substring(2, 4), 16);
const b = parseInt(h.substring(4, 6), 16);
return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
}Hex color to RGBA reference tables
Keep this section open when you work with an alpha channel in an 8-digit code. The suffix column is what you append to a 6-digit hex value to make it translucent.
Opacity to 8-digit hex suffix
| Opacity | Alpha in rgba() | Hex suffix |
|---|---|---|
| 100% | 1 | FF |
| 90% | 0.9 | E6 |
| 75% | 0.75 | BF |
| 50% | 0.5 | 80 |
| 35% | 0.35 | 59 |
| 25% | 0.25 | 40 |
| 10% | 0.1 | 1A |
| 0% | 0 | 00 |
Quick checks for the tool's input format
- #FFFFFF becomes rgba(255, 255, 255, 1), the pure white baseline.
- #000000 becomes rgba(0, 0, 0, 1), the pure black baseline.
- #3C9 expands to #33CC99 before conversion, then becomes rgba(51, 204, 153, 1).
- #E4572E59 already contains its alpha, so no separate opacity is needed.
Where an RGBA color code helps in CSS and design
An RGBA color is the quickest way to add transparency to a color you already own. Web designers and graphic artists reach for it whenever a flat swatch would hide what sits behind it.
Translucent overlays, shadows and borders
- Overlays: convert #000000 to rgba(0, 0, 0, 0.6) and the dark layer dims a hero photo so white text stays readable.
- Shadows: paste the converted rgba(0, 0, 0, 0.2) into a box shadow and it looks softer on any background.
- Borders: a hairline border from a low-alpha conversion separates cards without a harsh edge.
Brand and design-token colors
Most teams define a brand palette once as a design-token set, in hexadecimal. When a component needs a tinted background, run the token through the converter, for example #1A5F7A at 0.12 opacity for a hover tint, and the badge still matches the brand exactly with no second color to maintain.
Browser support and backward compatibility
The rgba() function works in every current browser, and the 8-digit form is supported across modern ones too. For backward compatibility with very old browsers, write a solid hex fallback first and the translucent declaration after it, so older engines ignore the line they do not understand. The rgba() text the converter produces is safe to paste as that second declaration.
Going the other way: RGBA to hex and hex to RGB
A color converter earns its place when it works in both directions. To go from RGBA to hex, turn each decimal channel back into a two-digit pair, then multiply alpha by 255 and add the fourth pair. For hex to RGB with no transparency at all, convert the three pairs and leave the alpha out entirely.
When you copy the result, choose between rgba() and the 8-digit form: rgba() reads more clearly when you tweak opacity later, while the 8-digit code is shorter inside a design-token file. Either notation works in HTML and XML-based graphics, in computer graphics tools and on web pages, so pick the one your team already uses.
Rules for entering a color code
- Type the code with or without the hash sign, since both forms are accepted.
- Use only the characters 0-9 and A-F, in upper or lower case.
- Enter 3, 6 or 8 digits and nothing else, because 4- and 5-digit codes are ambiguous.
- Set the opacity from 0 to 1, or let the last two digits of an 8-digit input supply it.
- Check the live preview before you copy the final rgba() text into your CSS.
With these rules in mind, you can convert any hex color to RGBA in seconds, and you can see what is happening to each channel along the way. The same pair-by-pair logic scales from one swatch to a whole palette, so a free converter becomes a dependable part of every front-end workflow.