How is the alpha byte calculated from a percentage?

The opacity percentage is multiplied by 255 and rounded, then written as a two-character hex value. For example 50 percent is 0.5 × 255 ≈ 128, which is 80 in hex, giving an alpha of 80.

When should I use #RRGGBBAA vs rgba()?

They are equivalent. Use 8-digit hex when your design tokens or variables are already hex-based; use rgba() when you prefer decimal channels or need to compute the colour in JavaScript. This tool gives you both.

Can I go the other way?

Yes. Paste an 8-digit hex and the tool reads its opacity back onto the slider and shows the equivalent rgba() and alpha byte.

Hex Colour Opacity Converter

Name: Hex Colour Opacity Converter
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Add opacity to a hex colour and get 8-digit hex plus rgba().

Free hex opacity converter. Enter a hex colour and an opacity percentage to get the 8-digit #RRGGBBAA hex, the matching rgba() string, and the alpha byte on its own. Paste an 8-digit hex to read its opacity back. Runs in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

Last updated 1 July 2026 Source: Gera Tools

What is an 8-digit hex colour?

It is a hex colour with two extra characters for the alpha channel: #RRGGBBAA. The last pair encodes opacity from 00 (fully transparent) to FF (fully opaque). It is supported in all modern browsers and is the hex equivalent of an rgba() colour.

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Adding transparency to a hex colour trips a lot of people up because hex has no obvious “opacity” field. The answer is the 8-digit hex (#RRGGBBAA), where the final pair is an alpha byte. This tool converts between an opacity percentage and that alpha byte, and shows the equivalent rgba().

Percentage to alpha byte

alphaByte = round(opacity% / 100 × 255)  ->  two-character hex

Opacity	Alpha byte	8-digit hex example
100%	FF	`#6D8BFFFF`
75%	BF	`#6D8BFFBF`
50%	80	`#6D8BFF80`
25%	40	`#6D8BFF40`
0%	00	`#6D8BFF00`

Both directions

Colour + opacity → code: pick a base colour and a percentage to get the 8-digit hex, the rgba() string, and the raw alpha byte.
8-digit hex → opacity: paste something like #6D8BFF80 and the tool reads the opacity straight back onto the slider.

The preview sits on a checkerboard so you see the true transparency rather than a colour blended against a solid background. Everything runs locally in your browser.