Convert HEX and RGBA without losing transparency

If a translucent colour becomes solid after copying it, check which output you copied. A six-digit HEX colour contains red, green and blue; it has no alpha channel. In the colour converter, use HEX · with alpha, RGBA, HSLA or Modern CSS when you want to keep transparency.

Try rgba(255, 136, 0, 0.5) in Color to convert. The preview shows the same orange over a checkerboard, white and a dark background. The solid and translucent outputs sit together, so the choice matters.

Copy the output that keeps alpha

For that input, the tool produces:

/* Opaque: alpha is omitted */
#FF8800
rgb(255, 136, 0)

/* Keeps the decimal alpha */
rgba(255, 136, 0, 0.5)
rgb(255 136 0 / 50%)

/* Alpha rounded to one byte */
#FF880080

Use the copy button beside the format you need. Copy CSS variables provides two variables: --color is opaque and --color-alpha preserves transparency in modern RGB syntax. Choosing the first variable for an overlay will make it solid even though the second variable is present in the same snippet.

You can download the CSS examples and try them in your own stylesheet. The notation does not choose your element or CSS property for you.

Why 50% becomes about 50.2% in HEX

CSS uses the final two digits of an eight-digit HEX colour for alpha. 00 is fully transparent and FF is fully opaque; MDN's HEX reference documents the ordering and shorthand syntax.

There are 256 possible alpha byte values. Halfway between 0 and 255 is 127.5, so this converter rounds 50% to 128, written as 80. Reading that byte back gives 128 ÷ 255, or about 50.1961%.

Paste #FF880080 back into the input. The tool shows rgba(255, 136, 0, 0.501961). That small change is quantisation, not a second opacity setting. Keep the decimal-alpha form when you need to retain exactly 0.5; displayed decimal values can still be rounded for other inputs.

Short HEX can hide a bigger difference

These inputs are easy to confuse:

Each digit in four-digit HEX is doubled. The final 8 becomes 88, not 80, so the short form above is not a 50% shorthand. The conversion results include all three inputs and the orange example.

Check the background before shipping

Matching colour values do not guarantee the same appearance on every surface. The converter's white and dark previews help you spot that an overlay depends on what is behind it. For text, check the actual text/background pair too; our contrast guide walks through that separate check.

This converter handles the listed HEX, RGB, HSL and HSV inputs. It does not resolve CSS variables, named colours other than transparent, or wide-gamut colour spaces. Its CMYK output is an approximation without a print profile, and HSV/CMYK notation is not a CSS value to paste into a stylesheet.

We checked these examples against the tool on 21 October 2026. The results record preserves the parsed channels and formatted outputs; it is not a display-calibration or print-colour test.