How do I convert hex to RGBA?

Split the code into pairs and turn each pair into a number from 0 to 255: in #007BFF, 00 is 0, 7B is 7 × 16 + 11 = 123 and FF is 255, so the color is rgba(0, 123, 255, 1) when fully opaque. Then put the opacity, from 0 to 1, in the fourth place.

What is an 8-digit hex color?

CSS Color Level 4 allows #RRGGBBAA, where the last pair is the alpha: 00 is fully transparent and FF fully opaque. #FF8800CC is rgba(255, 136, 0, 0.8). The 4-digit form doubles each digit, so #f008 is #FF000088, an alpha of 0.533.

Why does 50% opacity become 80 in hex?

The alpha pair is a byte: 0.5 × 255 = 127.5, which rounds to 128, and 128 is 80 in hex. Reading it back gives 128 ÷ 255 = 0.502, so the converter shows rgba(255, 87, 51, 0.502) for #FF573380.

Can I convert RGBA back to hex?

Yes. Paste rgba(255, 87, 51, 0.5) or the newer rgb(255 87 51 / 50%) and the hex output is #FF573380. Red, green and blue must be whole numbers from 0 to 255; percentages such as rgb(100% 0% 0%) get a message.

Is rgba() still valid CSS?

Yes. CSS Color Level 4 makes rgba() an alias of rgb(), and both accept an alpha. The newer form separates the values with spaces and puts the alpha after a slash, as in rgb(0 123 255 / 0.5).

Hex to RGBA Converter

Convert hex to rgba(): #007BFF is rgba(0, 123, 255, 1). Reads 3, 4, 6 and 8-digit hex or rgb()/rgba(), sets the opacity, and gives hsla() and 8-digit hex. How it works

Colour: hex (3, 4, 6 or 8 digits) or rgba()

Opacity

Alpha comes from the opacity control (1). In hex that is FF (100.0%).

RGBA

rgba(0, 123, 255, 1)

RGBA output

Preview

RGBArgba(0, 123, 255, 1)

HSLAhsla(211, 100%, 50%, 1)

Hex#007BFF

8-digit Hex#007BFFFF

CSS Variable--color: #007BFFFF;

R: 0

G: 123

B: 255

A: 1

About the Hex to RGBA Converter

#007BFF is rgba(0, 123, 255, 1); at 50% opacity it is rgba(0, 123, 255, 0.5), or #007BFF80 in 8-digit hex. Each pair of hex digits is one channel from 0 to 255 (00 to FF), and in 8-digit hex the last pair is the alpha: 80 is 128, and 128 ÷ 255 = 0.502. This hex to RGBA converter also reads #RGB, #RGBA, #RRGGBBAA and rgb() or rgba() text.

What the converter gives for each kind of input

You type	RGBA	HSLA	8-digit hex	Alpha taken from
#007bff	rgba(0, 123, 255, 1)	hsla(211, 100%, 50%, 1)	#007BFFFF	the opacity control (1)
#f00	rgba(255, 0, 0, 1)	hsla(0, 100%, 50%, 1)	#FF0000FF	the opacity control (1)
#f008	rgba(255, 0, 0, 0.533)	hsla(0, 100%, 50%, 0.533)	#FF000088	the color text
FF5733	rgba(255, 87, 51, 1)	hsla(11, 100%, 60%, 1)	#FF5733FF	the opacity control (1)
#FF573380	rgba(255, 87, 51, 0.502)	hsla(11, 100%, 60%, 0.502)	#FF573380	the color text
rgba(255, 87, 51, 0.5)	rgba(255, 87, 51, 0.5)	hsla(11, 100%, 60%, 0.5)	#FF573380	the color text
rgb(255 87 51 / 50%)	rgba(255, 87, 51, 0.5)	hsla(11, 100%, 60%, 0.5)	#FF573380	the color text
#ff8800cc	rgba(255, 136, 0, 0.8)	hsla(32, 100%, 50%, 0.8)	#FF8800CC	the color text
#00000000	rgba(0, 0, 0, 0)	hsla(0, 0%, 0%, 0)	#00000000	the color text

Opacity control left at 1. When the color text carries its own alpha (4 or 8 hex digits, or rgba() with an alpha), that alpha is used and the opacity control is ignored.

Opacity and the hex alpha pair

Opacity	Hex alpha	Byte (0 to 255)	Read back from the hex
0	00	0	0
0.1	1A	26	0.102
0.2	33	51	0.2
0.25	40	64	0.251
0.5	80	128	0.502
0.75	BF	191	0.749
0.8	CC	204	0.8
0.9	E6	230	0.902
1	FF	255	1

The hex alpha is a whole byte, so most opacities do not survive the round trip exactly: 0.5 becomes 80 (128) and reads back as 0.502. An alpha that rounds to byte 00 or FF is written as exactly 0 or 1, so rgba(1, 2, 3, 0.999) comes out as alpha 1 and #010203FF.

Frequently asked questions

How do I convert hex to RGBA?: Split the code into pairs and turn each pair into a number from 0 to 255: in #007BFF, 00 is 0, 7B is 7 × 16 + 11 = 123 and FF is 255, so the color is rgba(0, 123, 255, 1) when fully opaque. Then put the opacity, from 0 to 1, in the fourth place.
What is an 8-digit hex color?: CSS Color Level 4 allows #RRGGBBAA, where the last pair is the alpha: 00 is fully transparent and FF fully opaque. #FF8800CC is rgba(255, 136, 0, 0.8). The 4-digit form doubles each digit, so #f008 is #FF000088, an alpha of 0.533.
Why does 50% opacity become 80 in hex?: The alpha pair is a byte: 0.5 × 255 = 127.5, which rounds to 128, and 128 is 80 in hex. Reading it back gives 128 ÷ 255 = 0.502, so the converter shows rgba(255, 87, 51, 0.502) for #FF573380.
Can I convert RGBA back to hex?: Yes. Paste rgba(255, 87, 51, 0.5) or the newer rgb(255 87 51 / 50%) and the hex output is #FF573380. Red, green and blue must be whole numbers from 0 to 255; percentages such as rgb(100% 0% 0%) get a message.
Is rgba() still valid CSS?: Yes. CSS Color Level 4 makes rgba() an alias of rgb(), and both accept an alpha. The newer form separates the values with spaces and puts the alpha after a slash, as in rgb(0 123 255 / 0.5).

Making a brand color see-through

Make a see-through version of a brand color for an overlay, a hover state or a shadow: type #FF5733, set the opacity to 0.5 and copy rgba(255, 87, 51, 0.5). It also reads 8-digit hex and rgba() text, so a design tool’s #FF573380 goes back to rgba(). Beside rgba() it gives hsla(), 8-digit hex and a CSS variable line; the variable holds the 8-digit hex, as in --color: #FF573380;, not an rgba() value.

How hex becomes rgba()

Hex #RRGGBB holds red, green and blue as two hex digits each: channel = 16 × first digit + second digit, so 7B is 7 × 16 + 11 = 123. Three- and four-digit forms double each digit (#f00 is #FF0000). In #RRGGBBAA the last pair is the alpha, a byte from 0 to 255: alpha = byte ÷ 255, rounded to 3 decimals, so 80 (128) is 0.502. An opacity you type goes the other way, byte = round(opacity × 255), so 0.5 becomes 80. Example: #007BFF at opacity 0.5 gives rgba(0, 123, 255, 0.5) and #007BFF80. All hex output is upper-case.

Related Tools

View all tools

Dev

RGB to Hex

Convert RGB to a hex color code and back: rgb(255, 136, 0) is #FF8800. Paste #abc, ff8800 or 255,136,0; each channel is a whole number 0 to 255.

Dev

Color Picker

Pick a color or type a HEX, RGB or HSL value to get the other two, the CSS and CMYK forms, and its WCAG contrast ratio on white, black or a second color.

CSS

Color Contrast Checker

Enter a text and a background color, with opacity, to get the WCAG contrast ratio and AA and AAA pass or fail for normal and large text.

CSS

Color Palette Generator

Make a 5-color palette from one hex color: monochromatic, complementary, analogous, triadic or split-complementary, with WCAG contrast for each swatch.

CSS

Color Mixer

Mix two to four hex colors by weight in OKLab, sRGB or linear light: red and blue at 50% give #8c53a2 in OKLab. Copy HEX, RGB, HSL, OKLCH or CSS color-mix().

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.