Alpha blend calculator — the solid colour of a transparent layer

How to use the alpha blend calculator

1. Pick the Foreground colour, the colour of the top layer.
2. Set Foreground opacity from 0% to 100%.
3. Pick the Background colour underneath it.
4. Read the Solid result, its RGB value, the Formula with your numbers filled in, and the Contrast with the background.
5. Compare the translucent and solid previews; they should look the same.

What it does and when to use it

Design files and CSS are full of semi-transparent colours: white overlays that lift cards in a dark theme, black scrims behind dialogs, tinted selection highlights. Developers and testers often need the flat colour these produce, to check contrast, to hand a value to a platform that does not support transparency, or to match a colour picked from a screenshot.

This calculator does that flattening and shows the arithmetic, so you can check it. If you start from a colour and want the CSS code for it at some opacity, the colour opacity tool is the better fit. For blend modes such as multiply and screen, use the blend mode calculator. To mix two solid colours by a ratio, use the colour mixer.

How it works

With foreground opacity a (your slider value ÷ 100, times any alpha already in the colour), each channel is:

result = a × foreground + (1 − a) × background

This is the “source-over” rule from the W3C Compositing and Blending specification, the default way one layer is drawn over another. The tool then measures the WCAG contrast ratio between the result and the background.

Worked examples

These come from the calculator.

Black at 50% on white. Solid result #808080. The formula reads result = 0.5 × foreground + 0.5 × background. Contrast with white is 3.98:1, enough for a large icon but not for body text.

Blue #3b82f6 at 60% on white. Solid result #89b4fa, from 0.6 × foreground + 0.4 × background. Contrast with white drops to 2.11:1.

A dark-theme elevation overlay. White at 15% on navy #0f172a gives #333a4a. Its contrast with the navy is 1.56:1, so it reads as a raised surface, not as a border.

Limits and tips

• Only normal blending is covered. Layers set to multiply, screen or other modes need the blend mode calculator.
• Over images and gradients the result changes pixel by pixel; use the colour behind the most important area.
• The calculation runs in your browser.