HEX to RGBA

What is a HEX colour with alpha?

Hex with alpha extends the classic six-digit hex by adding two more digits on the end: #RRGGBBAA. The first six digits are the same sRGB red/green/blue channels you already know — each pair from 00 (none) to FF (full). The trailing two digits encode the alpha channel: 00 is fully transparent, FF is fully opaque, and everything in between is partial transparency. There’s also a four-digit shorthand #RGBA which doubles each character (so #F0AC expands to #FF00AACC). The format was added to CSS Color Module Level 4 and is now supported in every modern browser, so it works directly in stylesheets without a fallback.

What is the rgba() function?

rgba() is the CSS functional notation for an sRGB colour with an alpha channel, written as rgba(r, g, b, a). The first three values are decimal channels from 0 to 255 (exactly like rgb()), and the fourth is the alpha as a decimal from 0 (transparent) to 1 (opaque). So rgba(11, 16, 32, 0.5) is a dark navy at 50% opacity. The modern CSS spec actually merges rgb() and rgba() — you can pass four arguments to either function — but most stylesheets, linters and design-token systems still write rgba() explicitly when alpha is present.

The conversion math

For the RGB channels, convert each hex pair from base-16 to decimal: FF = 255, 1A = 26, B0 = 176. The alpha pair gets the same base-16 conversion, then divides by 255 to land in the 0–1 range — so 80 becomes 128 / 255 ≈ 0.502. For 3- and 4-digit input, each character is doubled before conversion (#F0AC → #FF00AACC). When the input has no alpha digits, the output alpha is simply 1.

Use cases

CSS authoring with overlays. Modal backdrops, hover tints and “frosted glass” effects almost always want partial transparency. If your designer hands you a hex with alpha (#0B102080) and your stylesheet convention is rgba(), this converter is the bridge.

JavaScript and canvas drawing. Canvas’s fillStyle accepts both hex-with-alpha and rgba() strings, but most colour-manipulation libraries (chroma.js, color, tinycolor) prefer rgba() input.

Design systems. Tokens stored as hex can be machine-converted to rgba() for runtime theming, especially in React Native or older mobile frameworks that don’t accept 8-digit hex strings directly.

Accessibility tooling. WCAG contrast tools that account for overlay opacity want rgba() so they can blend against a background correctly.

Pitfalls

• Alpha precision. Alpha is stored as one byte (0–255) but expressed in CSS as a 0–1 decimal. Round-tripping through different tools can shift the value slightly (e.g. 0.5 → 7F → 0.498); the converter rounds to two decimal places to keep results stable.
• 3- and 6-digit hex have no alpha. They’re treated as fully opaque (alpha = 1). If you actually wanted to drop alpha altogether, use the HEX to RGB landing for a three-channel result.
• Pre-multiplied alpha. Some image-processing pipelines use pre-multiplied alpha where the RGB channels are scaled by the alpha. CSS uses straight (non-premultiplied) alpha, which is what this converter assumes.
• Named colours not accepted. red, dodgerblue and the other 148 CSS named colours aren’t parsed here — paste hex only.

How to use this HEX to RGBA converter

1. Paste your hex into the input. It can be 3, 4, 6 or 8 digits, with or without a leading #, in any case.
2. The rgba(r, g, b, a) output and the colour swatch (over a checkerboard so you can see transparency) update live.
3. If your input isn’t a valid hex (wrong length, non-hex characters), a friendly inline message says what’s wrong.
4. Tap Copy to put the rgba() string on your clipboard.

Privacy

The conversion is a handful of lines of JavaScript running in your browser tab — no values are sent to a server, no logs are kept, and no analytics touch your colour data. The page caches its small bundle on first load and from then on works fully offline.

Compatibility notes

rgba() notation works in every browser since IE9 (2011), so it’s safe to use anywhere. Eight-digit hex (#RRGGBBAA) is newer — every evergreen browser supports it (Chrome 62+, Firefox 49+, Safari 9.1+, Edge 79+), but if you’re targeting very old environments or some HTML email clients, prefer the rgba() output this landing produces. The output uses comma-separated rgba() (rgba(11, 16, 32, 0.5)) because that’s still the form most CSS linters accept by default; the modern slash-separated syntax (rgb(11 16 32 / 0.5)) is available in the Color Converter.