HEX to RGBA Converter

How to use HEX to RGBA Converter

1. Enter a hex value, with or without alpha, or an rgba() string.
2. Read the equivalent in the other notation.
3. Copy whichever form your stylesheet or design tool expects.
4. CSS puts alpha last in eight-digit hex; Android resources put it first.
5. 80 is 50% alpha, 1A is 10%, FF is opaque — the value is the percentage of 255.
6. Check contrast on the blended result, not on the transparent colour.

Eight-digit hex is alpha, and it is well supported

#3B82F680 is the same colour as rgba(59, 130, 246, 0.5): the last two digits are the alpha channel, from 00 for fully transparent to FF for fully opaque. Every browser in current use supports it, so the old habit of converting to rgba() purely for transparency is no longer necessary. The one thing to watch is order: CSS puts alpha last, while some other ecosystems — notably Android — put it first, so #803B82F6 in an Android resource is the same colour written the other way round.

The alpha values worth knowing

FF is 100%, BF is 75%, 80 is 50%, 40 is 25%, 1A is 10% and 0D is 5%. The conversion is simply the percentage of 255 in hexadecimal, and those six cover most interface work: overlays, hover tints, disabled states and shadows. Note that CSS alpha is a decimal from 0 to 1, not a percentage, though modern CSS accepts a percentage too.

Transparency versus a solid blend

A semi-transparent colour composites against whatever is behind it, so the same value looks different on white and on a photograph. That is usually what you want for an overlay and usually not what you want for text, where you should compute the resulting blended colour and check that against the background for contrast — a contrast checker fed the transparent colour gives an optimistic answer. For a fixed background, blending to a solid hex also renders marginally faster and avoids the compositing entirely.