Using the converter
Type an rgba() value, the newer rgb(51 102 204 / 75%), or four bare numbers such as 51, 102, 204, 0.75. Opacity can be 0 to 1 or a percentage. The answer is an 8-digit hex code, with the alpha in the last pair.
If the colour has a 4-digit short form, a row gives it. Other rows show the colour flattened onto white and onto black, for a tool that won't take a see-through colour.
The rgba to hex formula
Each of red, green and blue is a number from 0 to 255. Divide it by 16, and the whole answer and the remainder are the two hex digits, with 10 to 15 written as A to F. Alpha is from 0 to 1, so multiply it by 255 first and round to a whole number.
For rgba(51, 102, 204, 0.75): 51 ÷ 16 = 3 remainder 3, so 33. 102 ÷ 16 = 6 remainder 6, so 66. 204 ÷ 16 = 12 remainder 12, so CC. Then 0.75 × 255 = 191.25, which rounds to 191, and 191 ÷ 16 = 11 remainder 15, so BF. Together that's #3366CCBF.
Rounding means two opacities very close together can share a pair. 0.5 and 0.501 both come out as 80.
Opacity to hex alpha
| Opacity | 0 to 1 | Hex pair | Out of 255 |
|---|---|---|---|
| 100% | 1 | FF | 255 |
| 90% | 0.9 | E6 | 230 |
| 80% | 0.8 | CC | 204 |
| 75% | 0.75 | BF | 191 |
| 70% | 0.7 | B3 | 179 |
| 60% | 0.6 | 99 | 153 |
| 50% | 0.5 | 80 | 128 |
| 40% | 0.4 | 66 | 102 |
| 30% | 0.3 | 4D | 77 |
| 25% | 0.25 | 40 | 64 |
| 20% | 0.2 | 33 | 51 |
| 10% | 0.1 | 1A | 26 |
| 5% | 0.05 | 0D | 13 |
| 0% | 0 | 00 | 0 |
Shadows and overlays
| rgba() | 8-digit hex | On white |
|---|---|---|
| rgba(0, 0, 0, 0.1) | #0000001A | #E6E6E6 |
| rgba(0, 0, 0, 0.2) | #00000033 | #CCCCCC |
| rgba(0, 0, 0, 0.5) | #00000080 | #808080 |
| rgba(0, 0, 0, 0.75) | #000000BF | #404040 |
| rgba(255, 255, 255, 0.5) | #FFFFFF80 | #FFFFFF |
| rgba(255, 255, 255, 0.8) | #FFFFFFCC | #FFFFFF |
| rgba(51, 102, 204, 0.25) | #3366CC40 | #CCD9F2 |
| rgba(255, 0, 0, 0.5) | #FF000080 | #FF8080 |
Which end the alpha goes on
CSS puts alpha last, in #RRGGBBAA, and so does this converter. Android colour resources put it first, as #AARRGGBB, so check which order a program expects before pasting a code into it.
A solid colour with an alpha of 1 gets FF on the end. You can leave that pair off, and RGB to hex gives the 6-digit code for colours with no transparency.
Questions
What hex pair is 50% opacity?
80. Half of 255 is 127.5, which rounds up to 128, and 128 is 80 in hex.
Can I write the alpha as a percentage?
Yes. rgba(0, 0, 0, 50%) and rgb(0 0 0 / 50%) both work here and in CSS.
What does an alpha over 1 do?
CSS clamps it to 1, fully solid, and so does this converter.
Sources
Added and reviewed . What's new