How to use the hex to rgba converter
- Enter your hex color code in the Hex color field. You can include or omit the
#prefix, and use uppercase or lowercase letters. - Set the Opacity percentage from 0 to 100. This value applies only if your hex code has 3 or 6 digits. A blank field means 100%.
- If you enter an 8-digit hex code (or 4-digit shorthand), the built-in alpha channel overrides the opacity field, and the result note says so.
- Read the results instantly: the
rgba()string, the alpha value as a decimal, the full 8-digit hex, and the base RGB values.
How hex to rgba conversion works
A standard 6-digit hex code like #3b82f6 represents red, green and blue channels using two hexadecimal digits each. To convert hex to rgba, each pair is parsed as a base-16 integer: 3b becomes 59, 82 becomes 130, and f6 becomes 246.
The alpha channel in CSS rgba() is a decimal between 0 and 1. When you set an opacity of 50 percent, the alpha is calculated as 50 / 100 = 0.5. The final output is rgba(59, 130, 246, 0.5).
For 3-digit shorthand hex codes like #f09, each digit is doubled before parsing: f becomes ff (255), 0 becomes 00 (0), and 9 becomes 99 (153).
8-digit hex and alpha channels
CSS Color Module Level 4 introduced 8-digit hex codes where the last two digits represent the alpha channel. For example, #ff000080 is fully red with an alpha of 0x80 (128 in decimal). The alpha value is computed as 128 / 255 = 0.502.
When you paste an 8-digit hex into this hex to rgba converter, the embedded alpha takes priority over the opacity slider. This makes it easy to inspect colors copied directly from design tools that export hex color with opacity to rgba formats. The 4-digit shorthand works the same way: #0f08 expands to #00ff0088.
Common hex to rgba reference table
This table shows several common colors converted at 100 percent and 50 percent opacity.
| Hex | RGB | rgba (100%) | rgba (50%) |
|---|---|---|---|
| #000000 | 0, 0, 0 | rgba(0, 0, 0, 1) | rgba(0, 0, 0, 0.5) |
| #ffffff | 255, 255, 255 | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 0.5) |
| #ff0000 | 255, 0, 0 | rgba(255, 0, 0, 1) | rgba(255, 0, 0, 0.5) |
| #008000 | 0, 128, 0 | rgba(0, 128, 0, 1) | rgba(0, 128, 0, 0.5) |
| #3b82f6 | 59, 130, 246 | rgba(59, 130, 246, 1) | rgba(59, 130, 246, 0.5) |
Using rgba in CSS
The rgba() function is widely supported in all modern browsers and is commonly used for overlays, shadows, and translucent backgrounds. Unlike the older opacity property, which affects an element and all its children, rgba() applies transparency only to the specific color value.
If you need to go the other direction, converting an rgba value back to a hex string, you can use the rgba to hex tool. For conversions to other color spaces, see hex to hsl or hex to cmyk.
Edge cases and common mistakes
When working with hex opacity to rgba conversions, keep these points in mind:
- Invalid characters: Hex codes only accept digits 0 through 9 and letters A through F. Characters like G or Z will cause an error.
- Wrong length: Valid hex codes have exactly 3, 4, 6 or 8 digits after removing the hash. A 5-digit code is invalid.
- Rounding differences: Alpha values derived from 8-digit hex are rounded to three decimal places. For instance,
0x80 / 255is approximately 0.502, not exactly 0.5. - Case insensitivity:
#FF0000and#ff0000produce identical results.
Worked examples
| Example | Input | Result |
|---|---|---|
| Standard blue at 50% opacity | Hex color: #3b82f6; Opacity (%): 50 | rgba(): rgba(59, 130, 246, 0.5); Alpha (0-1): 0.5; HEX8: #3B82F680; RGB: 59, 130, 246; HEX: #3B82F6 |
| 8-digit hex with built-in alpha | Hex color: #ff000080; Opacity (%): 100 | rgba(): rgba(255, 0, 0, 0.502); Alpha (0-1): 0.502; HEX8: #FF000080; RGB: 255, 0, 0; HEX: #FF0000 |
| Shorthand 3-digit hex | Hex color: f09; Opacity (%): 75 | rgba(): rgba(255, 0, 153, 0.75); Alpha (0-1): 0.75; HEX8: #FF0099BF; RGB: 255, 0, 153; HEX: #FF0099 |
| 4-digit shorthand hex | Hex color: #0f08; Opacity (%): 100 | rgba(): rgba(0, 255, 0, 0.533); Alpha (0-1): 0.533; HEX8: #00FF0088; RGB: 0, 255, 0; HEX: #00FF00 |
FAQ
What is the difference between hex and rgba?
Hex is a base-16 notation for RGB colors, optionally including an alpha channel in 8-digit form. The rgba() function expresses the same color using decimal values for red, green and blue, plus a decimal alpha from 0 to 1.
Does the opacity field affect 8-digit hex codes?
No. If you enter an 8-digit or 4-digit hex code, the alpha channel embedded in the hex value is used and the opacity field is ignored. The note under the result states which source was used. A blank opacity field counts as 100% for 3 and 6 digit codes.
Can I omit the # symbol?
Yes. This hex to rgba converter accepts inputs with or without the leading hash symbol. It trims whitespace and ignores letter case.
How do I convert a 3-digit hex to rgba?
Each digit is doubled. For example, #abc becomes #aabbcc, which translates to rgb(170, 187, 204). The alpha is then appended based on your opacity setting.
Is my color data sent to a server?
No. All calculations happen locally in your browser. Nothing is uploaded or stored.
Why does my 8-digit hex alpha show as 0.502 instead of 0.5?
The hex value 80 equals 128 in decimal. Dividing 128 by 255 gives approximately 0.50196, which rounds to 0.502. No 8-bit alpha value equals exactly 0.5, because 127 gives 0.498 and 128 gives 0.502.