Design & CSS Tools

RGBA to HEX

Convert RGBA colors with transparency into 8-digit HEX codes.

8-digit HEX (with alpha)
HEX without alpha
Solid HEX on background
CSS rgba()

What does this converter do?

RGBA is a color written as red, green and blue values plus an alpha value for transparency, for example rgba(79, 70, 229, 0.6). Many design tools, Android apps and some CSS frameworks need the same color as a HEX code instead. This tool gives you the 8-digit HEX version that keeps the transparency, and also a solid HEX color that looks the same when placed on a background you choose.

How to convert RGBA to HEX

  1. Enter the red, green and blue values (0 to 255) and drag the alpha slider (0 is invisible, 1 is solid). You can also paste a full rgba() value.
  2. Read the 8-digit HEX code, which includes transparency.
  3. If the program you are using does not support transparency, choose the background color and copy the solid HEX.

How 8-digit HEX works

A normal HEX color has six digits: two each for red, green and blue. An 8-digit HEX adds two more digits for alpha, written #RRGGBBAA. Alpha is converted from the 0 to 1 scale to 0 to 255 and then written in hexadecimal:

alpha 0.6 × 255 = 153 → 153 in hex = 99 → #4F46E599

Modern browsers support 8-digit HEX in CSS. Android uses a different order, #AARRGGBB, with alpha first, so move the last two digits to the front for Android XML files.

How the solid color is calculated

When a semi-transparent color sits on a background, each channel is mixed in proportion to alpha:

result = color × alpha + background × (1 − alpha)

For example, red 79 at alpha 0.6 on white (255) gives 79 × 0.6 + 255 × 0.4 = 149.4, which rounds to 149 (hex 95).

Frequently asked questions

Can I use percentage alpha like 60%?

Yes. Paste rgba(79 70 229 / 60%) and it is read as 0.6.

Why does my solid color look different on a dark page?

The solid HEX is only correct for the background you chose. Change the background color to match where the color will be used.

Is there a color picker for normal colors?

Yes, see the Color Picker.