Skip to content
Color Codes

Transparency

Color Opacity Calculator - RGBA & Hex Alpha

Convert color opacity percentages to RGBA, HSLA and eight-digit Hex alpha values, with live previews over white, black and custom backgrounds.

60%

Color formats

How to use this tool

Choose a base color and transparency, then see the real composited result over white, black and a custom background. Use it for overlays, disabled UI, glass effects, shadows and transparent CSS tokens.

  1. 1 Enter the base color.
  2. 2 Set opacity from 0% to 100%.
  3. 3 Copy RGBA, HSLA or eight-digit Hex.

Frequently asked questions

Where is alpha stored in eight-digit Hex?

The final two digits store alpha after the six RGB digits.

Why does a transparent color look different on each background?

The visible result combines foreground and background channels according to alpha.

What is 50% opacity in Hex alpha?

Fifty percent opacity is approximately 80 in Hex alpha, so #00000080 is black at about 50% opacity.

When should I use RGBA instead of Hex alpha?

RGBA is more readable when opacity is important for future maintenance; Hex alpha is compact when you want a single CSS color token.