PB
Available
palette
lock Free · Private · In-Browser

Hex Opacity Calculator

Add an opacity to a hex color to get the 8-digit hex and rgba().

Add transparency to a hex color

Modern CSS lets you write a color with built-in transparency as an 8-digit hex, #RRGGBBAA, but working out the alpha digits by hand is awkward. This tool appends the right alpha for any opacity percentage.

Set a color and an opacity of 50%, and it produces the 8-digit hex ending in 80, plus the equivalent rgba() value. A checkerboard preview shows the real transparency so you can judge it.

Correct and private

It scales the opacity to the alpha byte in your browser, so the result is exact and nothing you pick is uploaded.

Frequently Asked Questions

What is 8-digit hex?

A hex color with two extra digits for alpha (transparency): #RRGGBBAA. Modern browsers support it directly in CSS.

How does opacity map to hex?

The opacity percentage is scaled to 0–255 and written as two hex digits, so 50% becomes 80 and 100% becomes FF.

Does it show rgba too?

Yes — it gives the equivalent rgba() value, which is useful where 8-digit hex is not supported.

Take it further
All Free Tools

Browse the full set of free, private, in-browser tools.

Learn More arrow_forward