Hex to RGBA Converter

What this tool is used for

• Adding transparency to an existing brand colour for an overlay.
• Producing an rgba value for a shadow or a scrim from a hex token.
• Converting a hex colour for a context that needs an explicit alpha.
• Building a translucent variant of a palette colour.
• Checking how a colour reads at several alpha levels.

Frequently Asked Questions

How does the alpha value work?

In rgba() it is 0-1, where 0.5 is half transparent. In 8-digit hex it is a 00-FF pair, so 50% is roughly 80. Confusing the two scales — writing 0.8 where FF is expected — is the usual error.

What is the difference between opacity and alpha?

Alpha applies to the COLOUR only; the CSS opacity property applies to the whole element including its children and creates a new stacking context. Using opacity to fade a background also fades the text on it.

Should I use rgba() or 8-digit hex?

Both are universally supported now. rgba() is more readable and lets you vary alpha from a CSS variable; 8-digit hex is more compact and matches design-tool output. Modern CSS also allows rgb(0 0 0 / 50%).

How does alpha compositing work?

The result is a weighted blend with whatever is behind: result = foreground × alpha + background × (1 − alpha). That is why a semi-transparent colour looks different over white than over black — the same value, different backdrop.

Why does stacking two 50% layers not give 100%?

Because alpha multiplies rather than adds. Two 50% layers leave 25% of the background showing (0.5 × 0.5), not zero. Stacking transparencies to reach opacity always undershoots.

Why does a semi-transparent border look darker where it meets the background?

Because the border and the background both paint within the element's box by default. `background-clip: padding-box` stops the background reaching under the border, which is the fix for that doubled-up edge.

Does alpha affect how a colour is compared for contrast?

Yes, and it is a common oversight. WCAG contrast is computed on the composited result, so text at 60% alpha over white is measurably lighter than its own colour value suggests — check the blended colour, not the declared one.

Common errors and gotchas

• Confusing an alpha channel with a lighter shade, which look similar on white and differ everywhere else.
• Using an alpha overlay where a solid colour was needed, which then shifts with the background.
• Assuming an eight-digit hex and rgba are interchangeable in every browser and tool.
• Stacking several translucent layers and losing predictable contrast.
• Applying alpha to text and then failing a contrast requirement that the opaque colour passed.