Turn any hex color into a CSS rgba() value with a live opacity slider and transparency preview.
Enter any 6-digit hex color, then drag the opacity slider — the alpha channel (the fourth value in
rgba()) is just that opacity percentage expressed as a decimal from 0 to 1. A hex color and
100% opacity converts to rgba(r, g, b, 1); the same color at 50% opacity becomes
rgba(r, g, b, 0.5).
For example, #3498db at 50% opacity converts to rgba(52, 152, 219, 0.5).
| Opacity % | Alpha (RGBA) | HEXA suffix |
|---|---|---|
| 100% | 1 | ff |
| 90% | 0.9 | e6 |
| 75% | 0.75 | bf |
| 50% | 0.5 | 80 |
| 25% | 0.25 | 40 |
| 10% | 0.1 | 1a |
| 0% | 0 | 00 |
background: rgba(0, 0, 0, 0.5);
Want the full breakdown of when to use each color format? Read HEX vs RGB vs HSL: Which Color Format Should You Use? on our blog, or try our full Color Converter for HEX, RGB, and HSL together.
Alpha — the opacity/transparency channel, ranging from 0 (fully transparent) to 1 (fully opaque).
Yes. Modern browsers support an 8-digit hex format (e.g. #3498db80) where the last two
digits set the alpha channel — functionally identical to rgba(), just more compact.
No. The RGB values stay the same — only how much of what's behind the element shows through changes. A low-opacity color blended over a light background looks lighter; the same color over a dark background looks darker, even though the color value itself hasn't changed.
No. All conversions happen entirely in your browser. The values you enter are never sent to our server or saved.