To make a hex colour transparent, add two more hex digits for the alpha: #RRGGBBAA. The pair is the opacity times 255, written in hex, so 50% is 80, 75% is BF and 25% is 40. Pick a colour and opacity below to get the 8-digit hex plus the matching rgba and hsla values.
| Opacity | Alpha pair | Example on #4F98FB |
|---|---|---|
| 90% | E6 | #4F98FBE6 |
| 75% | BF | #4F98FBBF |
| 50% | 80 | #4F98FB80 |
| 25% | 40 | #4F98FB40 |
| 10% | 1A | #4F98FB1A |
Updated
Choose a colour, drag the opacity slider and copy whichever format your code needs. The preview shows the colour over white, black and a checkerboard, along with the solid colour it blends to on each.
| Opacity | Hex pair | Decimal (0 to 255) |
|---|---|---|
| 100% | FF | 255 |
| 95% | F2 | 242 |
| 90% | E6 | 230 |
| 85% | D9 | 217 |
| 80% | CC | 204 |
| 75% | BF | 191 |
| 70% | B3 | 179 |
| 65% | A6 | 166 |
| 60% | 99 | 153 |
| 55% | 8C | 140 |
| 50% | 80 | 128 |
| 45% | 73 | 115 |
| 40% | 66 | 102 |
| 35% | 59 | 89 |
| 30% | 4D | 77 |
| 25% | 40 | 64 |
| 20% | 33 | 51 |
| 15% | 26 | 38 |
| 10% | 1A | 26 |
| 5% | 0D | 13 |
| 0% | 00 | 0 |
A hex pair counts from 00 to FF, which is 0 to 255. The alpha pair uses the same scale, where 00 is fully transparent and FF is fully opaque. That is why the common values look odd at first: half of 255 is 127.5, so 50% rounds to 128, which is 80 in hex.
Designers often export colours from a design file with a separate opacity number. Turning that into a single 8-digit value makes it easy to drop into a design token or a Tailwind config.
Tailwind adds opacity with a slash after the colour name, for example bg-sky-500/50, which works for any colour in the theme. For a custom colour, an arbitrary value such as bg-[#4F98FB80] accepts the 8-digit hex directly.
Under the hood, Tailwind 4 mixes the colour with transparent using color-mix(), and older versions use rgb() with an alpha. The result on screen is the same as the hex value this tool gives you.
Yes. The #RRGGBBAA and #RGBA forms come from CSS Color Level 4 and work in every current version of Chrome, Edge, Firefox and Safari. Very old browsers ignore them, so add an rgba() fallback only if you still support those.
Multiply the opacity (0 to 1) by 255, round to a whole number and write it as two hex digits. For 30%: 0.3 times 255 is 76.5, which rounds to 77, which is 4D in hex. The full table on this page lists every step of 5%.
They describe the same colour. rgba(79, 152, 251, 0.5) and #4F98FB80 render identically, apart from the tiny rounding in the hex alpha. Pick whichever your codebase already uses.
#RGBA is the short form of #RRGGBBAA, the way #RGB is short for #RRGGBB. Each digit is doubled, so #0008 means #00000088, black at about 53% opacity.
Related: Color converter, Hex colour picker, Colour contrast checker, Colour blindness simulator, CSS text shadow generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.