ColorKitFree rgba to hex converter
RGBA to HEX, alpha kept or alpha spent
Free, no signup, and it answers the question both ways because rgba has two hex answers. Fold the transparency into the code and you get the eight-digit #rrggbbaa, supported everywhere except Internet Explorer; composite it against what sits behind it and you get a plain six-digit color that is no longer translucent at all. Three cards do the second one over white, over black and over a backdrop you choose, so the reason a single answer does not exist is visible rather than argued.
- 100% free
- No signup
- 8-digit #rrggbbaa
- Flatten over any backdrop
- Alpha in 256 steps
rgba(), the slash form rgb(15 23 42 / 60%), hsla() and an existing eight-digit hex all go in this field.
The slider steps one byte at a time rather than one percent, because a byte is what the last hex pair can actually hold — 0.600 is the value a browser reads back from 99.
Press Ctrl+V anywhere on the page to drop in an rgba() value — no need to click the field first.
Alpha kept: hex with eight digits
#0f172a99
No four-digit shorthand for this one — at least one pair has two different digits.
- Alpha as a hex pair
- 0.600 × 255 = 153 = 99
- Same color as rgba()
- rgba(15, 23, 42, 0.6)
- Same color, slash syntax
- rgb(15 23 42 / 60%)
Alpha spent: the six-digit color it renders as
On white
#6f747f
White label text on the composite: 4.70:1
On black
#090e19
White label text on the composite: 19.31:1
On your backdrop
#1f597c
White label text on the composite: 7.51:1
Three cards, three different six-digit answers from one rgba() value. Whichever one you ship stops being translucent: put it over a fourth background and it no longer matches.
How to turn an rgba value into hex
One input, two legitimate outputs, and a way to tell which one you need.
Enter the translucent color
The field takes rgba(15, 23, 42, 0.6), the slash form rgb(15 23 42 / 60%), hsla(), and an eight-digit hex you already have and want to re-read. The alpha slider under it moves in single bytes from 0 to 255 rather than in whole percent, because a byte is the unit the last hex pair can hold — you are choosing the stored value directly instead of a number that will be rounded to it.
Take the eight-digit code if the transparency has to survive
#rrggbbaa keeps the alpha inside the code, so one string carries the whole declaration and no separate opacity is needed. The panel shows the arithmetic that produced the last pair and offers the four-digit shorthand when all four pairs happen to be doubled digits. This is the answer to take when the element sits over content you do not control.
Or flatten it against the thing that is actually behind it
The three cards composite your color over white, over black and over a backdrop of your choosing, and each one hands back a plain six-digit hex plus the contrast a black or white label would get on it. Read them together: they are three different codes from one input, which is the proof that a translucent color has no single opaque equivalent until the background is known.
Technical specifications
| Alpha encoding | alpha × 255, rounded: 0.1 → 26 → 1a, 0.25 → 64 → 40, 0.5 → 128 → 80, 0.6 → 153 → 99, 0.75 → 191 → bf |
|---|---|
| Alpha resolution | 256 steps, so a CSS alpha lands on the nearest 1/255 — 0.35 stores as 89 and reads back as 0.349 |
| Browser support for #rrggbbaa | Chrome 62, Firefox 49, Safari 9.1, Opera 49, Edge 79; Internet Explorer never shipped it |
| Four-digit shorthand | Offered when both digits match in all four pairs — 65,536 of the 4,294,967,296 color-and-alpha combinations qualify |
| Compositing formula | Source-over in sRGB: channel = foreground × alpha + backdrop × (1 − alpha), the same maths a browser runs for a background-color |
| Backdrops compared at once | Three — #ffffff, #000000 and one you pick — because the flattened answer is different for each |
| Contrast reading | WCAG 2.1 ratios are defined for opaque pairs, so each card scores label text against the composite rather than against the translucent color |
| Where the composite is computed | In this tab while you drag; the backdrop you choose is state in the page and is never transmitted |
Frequently asked questions
What is 50% opacity in hex?
80 — half of 255 is 127.5, which rounds to 128, and 128 in hex is 80. The pairs worth memorising are 1a for 0.1, 40 for 0.25, 80 for 0.5, 99 for 0.6, bf for 0.75 and cc for 0.8. Notice that none of them look like the percentage they represent, which is the reason people reach for a converter for this one operation more than for any other in the family.
Is an eight-digit hex safe to ship in production CSS?
Yes for every browser still receiving updates: Chrome 62, Firefox 49, Safari 9.1, Opera 49 and Edge 79 all support #rrggbbaa, and Internet Explorer never did. If a legacy target still matters, declare the opaque six-digit fallback first and the eight-digit value on the line after — an old parser drops the declaration it cannot read and keeps the one above it.
Why does the same rgba() value produce different six-digit codes here?
Because compositing is arithmetic between two colors, and the second one changes per card. Each channel is computed as foreground × alpha + backdrop × (1 − alpha), so rgba(15, 23, 42, 0.6) over white is a slate grey while the same value over black is nearly black. Neither is more correct; whichever matches the surface your element sits on is the one to copy.
Can I flatten a color that sits over a photo or a gradient?
Not to one code — every pixel underneath produces its own result, so what you would need is an image, not a hex value. Keep the alpha in that situation and let the browser composite: use the eight-digit code or the rgba() form and the overlay stays correct as the backdrop varies. Flattening is only honest over a flat, known, opaque color.
Does an eight-digit hex work everywhere a six-digit one does?
In CSS yes, outside CSS often not. The HTML color input rejects it and silently resets itself to #000000, which is why pickers hand you six digits with the alpha reported separately; older Sass and Less pipelines print alpha colors as rgba() rather than folding them into the code; and some SVG and email clients ignore the fourth pair entirely, rendering the color fully opaque. Test the target before you rely on the compact form.
Should I use an alpha color or the opacity property?
An alpha color when only one paint should fade, opacity when the whole element should. Setting opacity: 0.6 fades the text, the border and every child along with the background, and it creates a new stacking context that can break a z-index you were relying on. Alpha in the background color leaves the text at full strength, which is nearly always what a translucent panel actually wants.
Why is my alpha slightly different after a round trip through hex?
Because the hex pair holds 256 steps and CSS alpha is continuous, so the value snaps to the nearest 1/255. An alpha of 0.35 stores as byte 89 and reads back as 0.349, and 0.6 survives untouched only because 153 divided by 255 is exactly 0.6. When a specific decimal matters — matching a value in a design spec, for instance — keep the rgba() form, where the number is preserved as written.
About alpha, and why it is not part of the color
Alpha is not a fourth channel of a color in the way red is a first. It is an instruction to whatever draws the pixel: blend me with what is already there, in this proportion. CSS Color Module Level 4 gave hex a way to carry that instruction by appending a pair, which is convenient and hides one genuine trap — the order. CSS reads eight digits as #rrggbbaa with alpha last, while Android's hex strings and Color ints are #aarrggbb with alpha first, so the same eight characters name two different colors depending on which document you are reading. A value that comes out of an Android theme file and looks almost right in a browser has usually been read in the wrong order.
Two numeric details are worth knowing before you trust a flattened value. The first is quantisation: alpha in a hex pair has 256 positions, so an arbitrary decimal is stored as the nearest one and comes back slightly changed. The second is the space the blend happens in. Browsers composite in gamma-encoded sRGB rather than in linear light, which is why 50% white over black gives #808080 and not the #bcbcbc that a physically linear average would produce — the difference is large, visible, and the reason a fade can look muddier on the web than in a renderer that works in linear light.
The practical consequence lands on accessibility. WCAG ratios are only defined between two opaque colors, so text in a translucent color, or text over a translucent scrim, has to be composited before it can be scored — take the six-digit result from the card that matches your surface into the contrast checker and score that. Stacked translucent panels compound the same problem, which the glassmorphism generator deals with directly. Once the alpha is gone, the color is an ordinary code again: split it into channels with HEX to RGB, or build a fresh one from channel numbers with RGB to HEX.
Where the compositing happens
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The backdrop is the only extra thing this page holds, and it is held the same way: the color you pick for the third card is component state, so it disappears when the tab does, and neither it nor the composite is ever sent for processing.