Opacity Calculator

This is an opacity calculator. Set alpha on a HEX to get rgba() / HEX8 / hsla(), then flatten the overlay onto a background as a solid HEX.

Examples — click a swatch

On checkerboard

On background

Click a value to copy it

One row: foreground background alpha, such as #3B82F6 #FFFFFF 0.5. Fill example loads three rows; the table shows the solid HEX and rgba().

Opacity calculator

This is an opacity calculator. Opacity (alpha) is how see-through a color is: 1 is solid, 0 is invisible. Set alpha on a HEX to get rgba(), HEX8 and hsla() for CSS, then flatten that overlay onto a background into one solid HEX. 50% #3B82F6 on white is fg × a + bg × (1 − a).

How to use

  1. Set the foreground and the background with HEX, the picker, Random, an example swatch, or EyeDropper where the browser allows it.
  2. Alpha is 0–1, 0–255 or %. The slider is 0–100%. Presets are 10%, 25%, 50%, 75% and 90%.
  3. The checkerboard shows rgba() alone. The other bar shows the same overlay on the background. The large swatch is the flattened solid.
  4. Copy rgba(), hsla(), HEX8, the solid HEX or the CSS variable. Show example uses #3B82F6 at 50% on white. Copy result copies rgba().
  5. Batch is foreground, background and alpha on one line. Fill example loads three rows; the table prints solid HEX and rgba().

Notes

Pasting HEX8 such as #3B82F680, or rgba() with an alpha, sets the slider. Alpha 0 is the background; 1 is the foreground. CSS opacity on an element fades children too; rgba() only fades that color. This is sRGB mix, same as CSS compositing in sRGB. HEX to RGBA writes the channels; tint/shade mixes toward white or black. Invalid HEX shows an error. Related: HEX to RGBA, tint shade generator.

Where to use it

  • Overlays, glass cards and 40% black on a photo.
  • Flattening a Figma token for email or CSS that rejects rgba().
  • Seeing 50% brand blue on white versus on dark slate.

Questions

Is 50% opacity the same as 50% tint?

Only on white. On any other background use this page.

RGBA or the CSS opacity property?

rgba() / HEX8 change one color. The opacity property fades the whole element and its children.

Three layers?

Flatten the top pair, then use that solid as the new foreground.