Skip to content
ToolQivo

Alpha Blend Calculator

Work out the solid colour a translucent layer really produces.

Color Tools Reviews Free · no sign-up

The stack

Layer 1

The alpha that turns the background into this, using layer 1's colour.

Flattened colour 
The solid colour appears here

Quick Tool Overview

The Alpha Blend Calculator works out the solid colour a translucent layer really produces over a given background, stacks several layers the way a browser composites them, and solves backwards for the alpha that hits a target colour.

What it does
Flattens translucent colours into solid ones
You give it
A background and one or more overlays
You get back
The solid HEX, with its contrast ratio
Best for
Scrims, overlays and checking translucent text
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Alpha Blend Calculator

A translucent colour has no fixed appearance — it depends entirely on what is behind it. This works out the exact solid colour that a given overlay produces over a given background, which is what you need whenever the transparency has to go away.

Several layers can be stacked, composited in order the way a browser does it, so you can flatten a whole pile of overlays — a scrim, a tint and a hover state — into the single opaque colour they add up to.

It also runs backwards, which is the more interesting direction. Given a background and a target colour you want to end up with, it solves for the alpha and overlay that produce it — so when a design specifies a colour but the implementation uses a white overlay, you can find the opacity that actually matches. The contrast ratio of the flattened result is shown throughout, because a translucent text colour has to be flattened before it can be scored at all.

Key features of the Alpha Blend Calculator

Stacked layers

Composite a scrim, a tint and a hover state in order, and get the single colour they add up to.

Solves backwards

Give a target colour and get the alpha that produces it — the direction you need when a design specifies the result.

Contrast on the result

Translucent text has no luminance until it is flattened, so the ratio is computed on the composited colour.

Order respected

Compositing is not commutative, and the layers are applied bottom to top exactly as a browser does.

Honest about the impossible

A target outside the line between background and overlay cannot be reached, and the tool says so rather than approximating.

How to use the Alpha Blend Calculator

  1. 1

    Set the background

    The opaque colour underneath everything.

  2. 2

    Add your overlay

    Its colour and its alpha. Add more layers if you have them.

  3. 3

    Read the flattened colour

    The solid HEX that matches what you see, with its contrast ratio.

  4. 4

    Or solve backwards

    Give a target colour and get the alpha that produces it.

Frequently asked questions

Per channel: result = overlay × alpha + background × (1 − alpha). Browsers apply it in sRGB, which is what this tool does so the answer matches what you actually see.

Reviews of the Alpha Blend Calculator

What people who use the Alpha Blend Calculator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Alpha Blend Calculator. It takes half a minute and no account.

Write the first review

More color tools