Hex to RGBA converter

Paste a hex code with 3, 4, 6 or 8 digits, with or without the #. The rgba() value appears with its opacity written to three decimal places, so it turns back into exactly the same hex code.

The swatch sits on a grey and white chequerboard, the way image editors show transparency, and the rows below give the same colour in the newer slash syntax, as a percentage, and as the solid colour it makes on white or black.

An 8-digit hex code is the usual six digits for red, green and blue with two more on the end for alpha. CSS Color 4 says 00 in that last pair is fully transparent and FF fully opaque. Read the pair as a number from 0 to 255, then divide by 255 to get the 0 to 1 scale that rgba() uses.

Take #FF880080. FF is 15 × 16 + 15 = 255 for red, 88 is 8 × 16 + 8 = 136 for green, and 00 is 0 for blue. The alpha pair 80 is 8 × 16 = 128, and 128 ÷ 255 = 0.502. So the colour is rgba(255, 136, 0, 0.502), an orange at a shade over half strength.

The 4-digit form doubles each digit, as the 3-digit form does. #F808 is #FF880088, and 88 is 136, so its alpha is 136 ÷ 255 = 0.533.

CSS Color 4 treats rgba() as another name for rgb(), so rgb(255, 136, 0, 0.5) works too. The newer form drops the commas and puts the alpha after a slash, as in rgb(255 136 0 / 50%). The alpha can be a number from 0 to 1 or a percentage in either form.

All of these are the same colour. Pick whichever matches the rest of your stylesheet.

A see-through colour has no single solid value. It depends on what is behind it. For each channel, the result is alpha × colour + (1 − alpha) × background.

For #FF880080 on white, green is 0.502 × 136 + 0.498 × 255 = 195, which is C3 in hex, and blue is 0.498 × 255 = 127, or 7F. Red stays at 255, so the flattened colour is #FFC37F. On black it is #804400. Those two rows help when a tool only takes six digits.