Convert Hex Color to RGBA
Convert any hex color to RGBA and set its opacity with a slider.
Your data is never sent to any server.
The hex to RGBA converter turns any hex color into a CSS-ready rgba() and
lets you pick its opacity with a slider. It works with 3, 4, 6 and 8-digit codes,
and also gives you the 8-digit hex and the modern rgb(r g b / %) syntax with the
same transparency.
The most common use is to start from your brand color and get a semi-transparent
version for a background, a shadow or an overlay on a photo. It also works the
other way round: if someone hands you an #RRGGBBAA code, you can see here what
opacity is hidden in the last two digits.
Hex opacity table
The last two digits of an 8-digit hex set the opacity. This table lists the most common values:
| Opacity | Alpha in rgba() | Hex digits |
|---|---|---|
| 100% | 1 | FF |
| 95% | 0.95 | F2 |
| 90% | 0.9 | E6 |
| 85% | 0.85 | D9 |
| 80% | 0.8 | CC |
| 75% | 0.75 | BF |
| 70% | 0.7 | B3 |
| 65% | 0.65 | A6 |
| 60% | 0.6 | 99 |
| 55% | 0.55 | 8C |
| 50% | 0.5 | 80 |
| 45% | 0.45 | 73 |
| 40% | 0.4 | 66 |
| 35% | 0.35 | 59 |
| 30% | 0.3 | 4D |
| 25% | 0.25 | 40 |
| 20% | 0.2 | 33 |
| 15% | 0.15 | 26 |
| 10% | 0.1 | 1A |
| 5% | 0.05 | 0D |
| 0% | 0 | 00 |
For example, a blue #3B82F6 at 50% opacity is written #3B82F680 as an 8-digit
hex and rgba(59, 130, 246, 0.5) in CSS.
How to use Hex to RGBA
- 1
Type or paste the hex color
Enter the code with or without the # sign. All four CSS lengths are accepted: 3 digits (#F80), 4 digits (#F808), 6 digits (#FF8800) and 8 digits (#FF880080).
- 2
Set the opacity
Move the opacity slider between 0% and 100%. The color swatch updates instantly with the chosen transparency. If your code already has an alpha channel, the slider starts from that value.
- 3
Copy the format you need
Copy the CSS-ready rgba(), the 8-digit hex with the transparency included, or the modern rgb(r g b / %) syntax. Each channel is also broken down below.
Frequently asked questions
How do I add transparency to a 6-digit hex color?
Type the 6-digit color and lower the opacity with the slider. The tool gives you the rgba() with the chosen alpha and the equivalent 8-digit hex, which is the same color with two transparency digits added at the end.
What is an 8-digit hex?
It is an extension of the 6-digit hex that adds a transparency channel. The first six characters are the color (RR, GG, BB) and the last two are the opacity (AA), where 00 is fully transparent and FF is fully opaque.
What are the short #RGB and #RGBA formats?
They are shorthands where each digit is doubled. #F80 is the same as #FF8800 and #F808 is the same as #FF880088. Browsers read them exactly like the long form, and so does this tool.
Why does the alpha channel appear as a number between 0 and 1?
The CSS rgba() function expresses opacity as a decimal between 0 and 1. The two hex alpha digits go from 00 to FF, that is from 0 to 255, so the tool divides them by 255 and rounds to two decimals.
What is the difference between #RRGGBBAA and #AARRGGBB?
Android and some other programs use AARRGGBB, with alpha first. CSS uses RRGGBBAA, with alpha last, and that is the format this converter uses. If your code comes from Android, move the first two digits to the end before pasting it.
Do all browsers support it?
The 8-digit hex and the rgb(r g b / %) syntax work in every current browser. The rgba() function works even in very old browsers, so it is the safest choice if you do not know where your CSS will run.