Productive ToolboxHEX to RGBA Converter
Add transparency to a HEX color: get rgba(), 8-digit HEX and Android #AARRGGBB, preview it on white and black, and see the solid color it produces.
HEX Color Input
Supports #RGB, #RGBA, #RRGGBB and #RRGGBBAA; alpha digits in the code move the slider.
On White and on Black
Transparency Preview
Output Formats
Lighter & Darker Shades
Related tools
HEX, RGBA and the Alpha Channel
RGBA is RGB plus a fourth value, alpha, which sets how opaque the color is: 1 is solid, 0 is invisible and 0.5 lets half of the background show through. The same transparency can be written several ways, depending on where the color is used:
rgba(52, 152, 219, 0.5) CSS, all browsers
rgb(52 152 219 / 50%) modern CSS
#3498DB80 CSS, Figma (#RRGGBBAA)
#803498DB Android, .NET (#AARRGGBB)
Only the color itself becomes transparent. Text inside an element with an rgba() background stays fully solid, unlike the CSS opacity property, which fades everything in the element.
Opacity to HEX Alpha Chart
Add these two digits after a six-digit HEX code (or before it on Android). Each is the opacity × 255, rounded and written in hex.
| Opacity | Alpha (0–1) | HEX digits | Example (CSS) |
|---|---|---|---|
| 100% | 1 | FF | #3498DBFF |
| 95% | 0.95 | F2 | #3498DBF2 |
| 90% | 0.9 | E6 | #3498DBE6 |
| 85% | 0.85 | D9 | #3498DBD9 |
| 80% | 0.8 | CC | #3498DBCC |
| 75% | 0.75 | BF | #3498DBBF |
| 70% | 0.7 | B3 | #3498DBB3 |
| 65% | 0.65 | A6 | #3498DBA6 |
| 60% | 0.6 | 99 | #3498DB99 |
| 55% | 0.55 | 8C | #3498DB8C |
| 50% | 0.5 | 80 | #3498DB80 |
| 45% | 0.45 | 73 | #3498DB73 |
| 40% | 0.4 | 66 | #3498DB66 |
| 35% | 0.35 | 59 | #3498DB59 |
| 30% | 0.3 | 4D | #3498DB4D |
| 25% | 0.25 | 40 | #3498DB40 |
| 20% | 0.2 | 33 | #3498DB33 |
| 15% | 0.15 | 26 | #3498DB26 |
| 10% | 0.1 | 1A | #3498DB1A |
| 5% | 0.05 | 0D | #3498DB0D |
| 0% | 0 | 00 | #3498DB00 |
The Solid Color Behind a Transparent One
A transparent color looks different on every background. Over a solid background, each channel mixes as:
For rgba(52, 152, 219, 0.5) over white, red is 0.5 × 52 + 0.5 × 255 ≈ 154, which gives #9ACCED. The converter shows this solid equivalent for white and black backgrounds, which is useful for email templates, PDFs and design tools that flatten transparency.
For plain HEX to RGB without transparency, with the working shown, use the HEX to RGB converter; for HSV, CMYK or CSS color names, the color format converter.
How to Use the HEX to RGBA Converter
- 1Enter a HEX color: Type a HEX code (#3498DB), pick one with the color picker, or paste an 8-digit code such as #3498DB80 to load its transparency.
- 2Set the opacity: Drag the alpha slider from 0 (fully transparent) to 1 (fully opaque); every output updates as you drag.
- 3Check it on light and dark: The previews show the color over white, black and a checkerboard, with the solid color it produces on each background.
- 4Copy the format you need: Copy rgba(), the modern rgb( / %) syntax, 8-digit HEX for CSS, #AARRGGBB for Android, HSLA, or the solid equivalent.
Frequently Asked Questions
How do I convert HEX to RGBA?
Convert the HEX code to RGB and add the alpha as a fourth value from 0 to 1. #3498DB is rgb(52, 152, 219), so at 50% opacity it is rgba(52, 152, 219, 0.5).
How do I add opacity to a HEX color?
Append two hex digits for the alpha: alpha × 255, converted to hex. 50% is 128 = 80, so #3498DB at 50% is #3498DB80. Common values: 100% FF, 75% BF, 50% 80, 25% 40, 10% 1A. All current browsers support 8-digit HEX in CSS.
Why does Android use #AARRGGBB instead of #RRGGBBAA?
Android color resources and .NET put the alpha first, while CSS puts it last. The same 50% blue is #803498DB in an Android colors.xml file and #3498DB80 in CSS, so copy the format that matches your platform.
What is the difference between rgba() and opacity in CSS?
rgba() makes only that color transparent, for example a background, while the opacity property fades the whole element, including its text and children. Use rgba() for see-through backgrounds with solid text.
What solid color does a transparent color look like?
On a solid background each channel becomes alpha × color + (1 − alpha) × background. rgba(52, 152, 219, 0.5) over white looks like #9ACCED and over black like #1A4C6E. Use the solid equivalent when a tool or email client does not support transparency.
Is rgba() still needed in modern CSS?
No, but it still works everywhere. In current CSS, rgb() accepts alpha too, written rgb(52 152 219 / 50%), and rgba() is kept as an alias of rgb().
Related Tools
HEX to RGB Converter
Convert HEX to RGB and RGB to HEX, with the math shown step by step.
Color Format Converter
Convert HEX, RGB, HSL, HSV and CMYK, including alpha and CSS color names.
HSL Color Slider
Adjust hue, saturation, and lightness with live preview.
Random Hex Color Generator
Spacebar to refresh color inspiration.
CSS Gradient Generator
Create linear and radial gradients with copy-ready CSS.
PX to REM Converter
Convert pixel values to rem/em units with configurable base font size.
CSS Button Style Generator
Design a button visually with color, border-radius, shadow, and hover effects. Get copy-ready CSS.
Color Palette Generator
Generate harmony-based palettes with export and contrast checks.
CSS Box Shadow Generator
Build layered shadows with live preview and copy-ready CSS.
CSS Glassmorphism Generator
Create frosted glass effects with live preview and copy-ready code.
SVG Path Visualizer
Draw SVG path data on a grid with every command explained.
Contrast Checker
Test WCAG AA and AAA color contrast accessibility.