HEX Opacity Converter

Add opacity to any HEX color and get #RRGGBBAA, rgba(), hsla() and the solid color it produces on any background. Runs entirely in your browser. Nothing is sent to any server.

Options

Color

Opacity (%)

Background to flatten on

Results

Transparent

On white

On black

On your background

Opacity to HEX alpha

How does opacity work in HEX colors?

A HEX color can carry transparency as a fourth pair of digits: #RRGGBBAA, where AA goes from 00 (fully transparent) to FF (opaque), so 50% opacity is 80 and #2563eb80 is the same as rgba(37, 99, 235, 0.5). This converter takes any color and an opacity, and writes it as 8-digit HEX, rgba(), hsla(), oklch() and Android's #AARRGGBB, which puts the alpha first. It also calculates the solid color a translucent one turns into over white, black or your own background, and lists the HEX alpha suffix for every opacity in 5% steps.

Examples

Writing the same translucent color in different places:

CSS

/* the same 50% blue, three ways */
color: #2563eb80;
color: rgba(37, 99, 235, 0.5);
color: hsla(221, 83%, 53%, 0.5);

JavaScript

const alpha = Math.round(0.5 * 255).toString(16).padStart(2, "0"); // "80"
const withAlpha = "#2563eb" + alpha; // "#2563eb80"

Android XML

<!-- #AARRGGBB: alpha first -->
<color name="overlay">#802563EB</color>

Swift

UIColor(red: 37 / 255, green: 99 / 255, blue: 235 / 255, alpha: 0.5)

Sass

$overlay: rgba(#2563eb, 0.5);
$solid-on-white: mix(#2563eb, #fff, 50%);

Use Cases

Overlays and scrims

Darken a photo or a modal backdrop with black or a brand color at 40% to 60% opacity, and copy the value in the syntax your stylesheet uses.

Converting design tool values

Figma and Sketch show a HEX plus an opacity percentage. Turn that pair into a single #RRGGBBAA or rgba() value for CSS.

Flattening transparency

Some contexts, like emails, PDFs or design tokens, need an opaque color. Get the exact solid color a translucent one produces on its real background.

Android and cross-platform apps

Android colors put the alpha first (#AARRGGBB). Copy the right order without rearranging digits by hand.

Frequently Asked Questions

What is the HEX code for 50% opacity?

80. Opacity is stored as one byte from 00 to FF, so 50% is round(0.5 x 255) = 128, which is 80 in hexadecimal. The table in the tool lists every 5% step, such as 33 for 20% and CC for 80%.

Do browsers support 8-digit HEX colors?

Yes, every current browser and every browser this site supports reads #RRGGBBAA and the short #RGBA form. Very old browsers such as Internet Explorer don't, which is the only reason to prefer rgba().

Why is Android's format different?

Android's Color class and XML resources use #AARRGGBB, with the alpha first, while CSS uses #RRGGBBAA with the alpha last. The same 50% blue is #802563EB on Android and #2563eb80 in CSS.

What does the solid color on a background mean?

A translucent color blends with whatever is behind it. The solid value is that blend worked out in advance, so you can use it where transparency isn't available or to check its contrast.

Is my data sent to a server?

No. Everything is calculated in your browser with plain JavaScript. Nothing you enter is transmitted or stored.