Turn a hex color plus an opacity into rgba() — pick the color, slide the alpha, and get rgba(30, 144, 255, 0.6), the modern slash syntax and the 8-digit hex form (#1e90ff99) all at once. Useful for overlays, scrims and translucent UI layers.
Settings
Generated locally in your browser — your settings and results never leave this page.
Adding the fourth channel
Solid colors need three channels; layered interfaces need a fourth. Alpha measures opacity from 0 (invisible) to 1 (solid), and rgba() is the syntax that carries it. This converter takes a hex color plus an alpha slider and emits every useful spelling of the translucent result — because scrims, overlays, hover washes and glass effects all start with exactly this operation.
Alpha does not change the color; it changes how much of whatever lies beneath shows through. The rendered pixel is a per-channel blend: shown = α×color + (1−α)×background.
Worked example: #1e90ff at 60%
Dodger blue at 60%% opacity:
rgba(30, 144, 255, 0.6) /* legacy syntax */ rgb(30 144 255 / 60%) /* modern syntax */ #1e90ff99 /* 8-digit hex: 0.6×255 ≈ 153 = 99₁₆ */
Over a white background that composites to rgb(120, 188, 255); over black, to rgb(18, 86, 153) — the same declaration, two very different pixels. The preview’s checkerboard makes the transparency itself visible.
Choosing among the three syntaxes
They are interchangeable to the browser, so choose for the reader: rgba() with commas is recognized by every developer alive; the modern slash form matches the rest of CSS Color 4 and plays well with relative color syntax; 8-digit hex keeps design-token files uniform when everything else is hex. This tool emits all three so the choice costs nothing.
The accessibility footnote that matters
A translucent text color has no fixed contrast ratio — it depends on what is behind it. WCAG audits measure the composited result. Flatten the color against its real background (the numbers above show how), then verify the flattened pair in the WCAG Contrast Checker. Semi-transparent text over variable content is where accessible designs quietly fail.
Scrims: the pattern that uses this most
The single most common destination for a hex-plus-alpha conversion is the scrim — the translucent layer between a background image and its text. The working recipe: brand-dark or near-black at 40–60% alpha (#00000066 to #00000099), laid over the image, with text measured against the worst-case composite. The Gradient Accessibility Checker’s logic explains why scrims won: they manufacture a boundable background where raw images offer none. When a design review asks “can we lighten the overlay?”, this converter plus that checker turn the question into arithmetic.
How to use the HEX to RGBA Converter
- Pick the base color with the picker or type its hex.
- Slide the alpha control to the opacity you need – the preview updates live.
- Copy rgba() legacy syntax, the modern slash syntax, or the 8-digit hex from the outputs.
- Share the exact result: the page URL updates with your input, so the link reproduces it.
Frequently asked questions
What does the alpha in RGBA actually control?
Opacity: 1 (or 100%) is fully solid, 0 fully invisible, and everything between blends the color with whatever is behind it. rgba(30, 144, 255, 0.6) is dodger blue at 60% opacity – the final pixels depend on the background it sits over.
How is 60% opacity written in 8-digit hex?
0.6 × 255 ≈ 153, which is 99 in base 16 – so #1e90ff99. The last two hex digits are the alpha channel exactly like the color pairs, which is why #1e90ffff equals the plain #1e90ff.
Should I use rgba() or opacity in CSS?
They differ: rgba() as a color makes only that property translucent, while the opacity property fades the entire element including its children and text. Use rgba() (or 8-digit hex) for translucent backgrounds behind readable text.
Is rgba(30 144 255 / 60%) the same as rgba(30, 144, 255, 0.6)?
Yes – the slash form is the modern CSS syntax and the comma form the legacy one; browsers treat them identically. This tool emits both so you can stay consistent with your stylesheet.
Does alpha affect contrast for accessibility?
Heavily. WCAG contrast is computed on the final rendered color, and a 60%-alpha text color over an unknown background has no single contrast ratio. Flatten the color against its real background first, then check it in the WCAG Contrast Checker.
Why does my translucent color look different over different backgrounds?
Because alpha blending is compositing: shown = α×color + (1−α)×background per channel. The same rgba value over white and over black produces genuinely different pixels – that is the feature, not a bug.
Can I go the other way, from rgba() back to hex?
Yes – the RGBA to HEX converter parses any rgba() string and emits the 8-digit hex, plus the flattened 6-digit values over white and black if you need solid fallbacks.
