Convert RGBA Color to Hex
Convert RGBA values (with alpha channel) to an 8-digit hex code with a color preview.
Your data is never sent to any server.
The RGBA to hex converter turns a color with transparency into its 8-digit
code, #RRGGBBAA. You enter the three color channels and an alpha from 0 to 1,
and copy a single code that carries both the color and its opacity.
From opacity to the last two digits
The alpha is scaled from 0–1 to 0–255 and written in hexadecimal:
| Opacity | Alpha | Hex digits |
|---|---|---|
| Opaque | 1 | FF |
| 80% | 0.8 | CC |
| 50% | 0.5 | 80 |
| 20% | 0.2 | 33 |
| Invisible | 0 | 00 |
So rgba(59, 130, 246, 0.5) becomes #3B82F680. If you need to go the other
way, with a slider to pick the opacity, there is the hex to RGBA
converter.
When the 8-digit hex pays off
When you want a single value per color, for example in the variables or tokens
of a design system. If the color will live in a
stylesheet that other people edit, rgba() keeps the opacity visible and can be
adjusted without a calculator.
How to use RGBA to Hex
- 1
Enter R, G and B
Type a number from 0 to 255 in each color channel. If you go out of range, the value is clamped to the nearest limit.
- 2
Add the alpha
The A channel is the opacity and goes from 0 to 1, just like in CSS rgba(): 1 is opaque, 0.5 is half and 0 is invisible.
- 3
Copy the 8-digit hex
The result is an #RRGGBBAA code with the transparency stored in the last two digits, next to a swatch of the color.
Frequently asked questions
How is opacity stored in a hex code?
As a fourth pair of digits at the end. The alpha from 0 to 1 is multiplied by 255 and written in base 16, so 0.5 gives 127.5, which rounds to 128 and is written 80.
Are rgba() and the 8-digit hex the same thing?
Yes. rgba(255, 0, 0, 0.5) and #FF000080 describe the same semi-transparent red. The hex is shorter; rgba() is easier to read when someone has to tweak the opacity by hand.
Why does a 0.3 alpha not come back exactly when converted back?
Because the hex pair only has 256 possible values. 0.3 × 255 = 76.5, which is stored as 77 (4D), and 77 / 255 is 0.302. You cannot see the difference, but it explains why some alphas do not survive a round trip exactly.
Do all browsers understand it?
All current ones do. Firefox and Safari have supported it since 2016, Chrome since 2017 and Edge since it moved to Chromium in 2020. Only very old browsers would ignore it.
My code comes from Android and looks wrong. Why?
Android puts the alpha first (#AARRGGBB) and CSS puts it last (#RRGGBBAA). If you copy a color from Android, move the first two digits to the end.