How do I convert a hex color to RGBA?

Split the hex into its red, green, and blue byte pairs and convert each to decimal (0-255), same as a plain hex-to-RGB conversion, then add a fourth alpha value between 0 (fully transparent) and 1 (fully opaque): rgba(R, G, B, A). For example #FF6B35 at 50% opacity is rgba(255, 107, 53, 0.5).

What's the difference between rgba() and an 8-digit hex color?

They represent the same information differently. rgba(255, 107, 53, 0.5) and #FF6B3580 both mean the same orange at 50% opacity — the 8-digit hex just appends two more hex digits (00-FF) for alpha instead of a separate decimal value. Both have been supported in all major browsers since 2017.

How do I convert an alpha percentage to the two hex digits?

Multiply the percentage (as a 0-1 fraction) by 255, round to the nearest integer, and convert to a two-digit hex value. 50% opacity is 0.5 × 255 = 127.5, rounds to 128, which is 0x80 — hence #FF6B3580 for 50% opacity orange.

Is rgba() or 8-digit hex better to use in CSS?

Functionally identical — pick whichever fits your codebase's style. rgba() is more explicit about the alpha value at a glance; 8-digit hex is more compact and pairs naturally with design tools that already output hex swatches.

Guide

Hex to RGBA: adding transparency to a hex color code

#FF6B35 has no concept of transparency. rgba(255, 107, 53, 0.5) does — the conversion is just splitting the hex digits back into channels.

By Buğra SözeriPublished September 25, 2026

A standard 6-digit hex color like #FF6B35encodes red, green, and blue — nothing else. There’s no slot for transparency in that format. To make a color partially see-through in CSS, you need either the rgba() function, which adds a fourth alpha channel as a 0-to-1 decimal, or the newer 8-digit hex syntax (#RRGGBBAA), which appends two more hex digits for the same purpose. Converting between hex and RGBA is the same channel-splitting math as a plain hex-to-RGB conversion, plus one extra number.

Splitting the hex digits into RGB channels

A 6-digit hex color is three 2-digit hex byte pairs back to back: FF (red), 6B (green), 35 (blue). Each pair is a base-16 number from 00 to FF, representing 0-255 in decimal. FF = 255, 6B = 107, 35 = 53 — giving rgb(255, 107, 53). Add an alpha value between 0 and 1 as a fourth argument and you have rgba(255, 107, 53, 1) for fully opaque, or any fraction below 1 for partial transparency.

Common opacity values, both ways

Opacity	rgba() alpha	8-digit hex suffix
100%	1	FF
90%	0.9	E6
75%	0.75	BF
50%	0.5	80
25%	0.25	40
10%	0.1	1A
0%	0	00

The hex suffix comes from multiplying the opacity fraction by 255 and converting to hex — 50% is 0.5 × 255 = 127.5, which rounds to 128 (decimal) or 80 (hex). Both the rgba() function and the 8-digit hex syntax have been supported in every major browser since 2017, per the W3C CSS Color Module, so the choice between them is purely stylistic.

Why this matters beyond CSS

The same math applies anywhere a design tool or API asks for an alpha-aware color — SVG’s fill-opacity, canvas fillStyle strings, or a design system token that stores translucent overlay colors. If you start from a brand hex color and need a semi-transparent overlay variant (a common pattern for hover states or modal backdrops), convert the base hex to RGB with a hex to RGB converter, then reassemble it as rgba() with whatever alpha the design calls for — no need to hand-calculate the byte pairs each time.

Frequently asked questions

How do I convert a hex color to RGBA?: Split the hex into its red, green, and blue byte pairs and convert each to decimal (0-255), same as a plain hex-to-RGB conversion, then add a fourth alpha value between 0 (fully transparent) and 1 (fully opaque): rgba(R, G, B, A). For example #FF6B35 at 50% opacity is rgba(255, 107, 53, 0.5).
What's the difference between rgba() and an 8-digit hex color?: They represent the same information differently. rgba(255, 107, 53, 0.5) and #FF6B3580 both mean the same orange at 50% opacity — the 8-digit hex just appends two more hex digits (00-FF) for alpha instead of a separate decimal value. Both have been supported in all major browsers since 2017.
How do I convert an alpha percentage to the two hex digits?: Multiply the percentage (as a 0-1 fraction) by 255, round to the nearest integer, and convert to a two-digit hex value. 50% opacity is 0.5 × 255 = 127.5, rounds to 128, which is 0x80 — hence #FF6B3580 for 50% opacity orange.
Is rgba() or 8-digit hex better to use in CSS?: Functionally identical — pick whichever fits your codebase's style. rgba() is more explicit about the alpha value at a glance; 8-digit hex is more compact and pairs naturally with design tools that already output hex swatches.

Sources & references

Authoritative references cited by this piece. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.

W3C CSS Color Module Level 4 — The spec defining rgba(), the 8-digit #RRGGBBAA hex syntax, and how alpha composites(as of 2026-09-25)
MDN — <color> CSS data type — MDN's reference for every CSS color syntax including alpha variants(as of 2026-09-25)