Color Opacity Calculator

A semi-transparent colour looks different on every background. This tool takes the top colour, the background and an opacity, and tells you what solid colour that combination looks like. That's what you need when a design tool or a file format can't handle transparency, and it also gives you the rgba() and 8-digit hex versions.

How to use it

1. Enter the top colour and the background colour.
2. Set the opacity with the slider.
3. Read the solid result.
4. Copy the rgba or 8-digit hex value.

When it helps

• Matching an overlay colour in a tool with no transparency.
• Creating a hover colour from a semi-transparent one.
• Turning a transparent colour into an opaque one.
• Checking contrast against a real background.

Good to know

• The result depends entirely on the background colour you enter.
• 8-digit hex puts the opacity in the last two digits, so #2563eb66 is 40 percent.
• At 100 percent the result is just the top colour.

The blending formula

Each channel of the result is the top colour times the opacity plus the background times one minus the opacity. At 40 percent blue over white, red becomes 37 times 0.4 plus 255 times 0.6, which is 168.

The tool applies this to red, green and blue and rounds to whole numbers.

Worked example: a tinted background

You want a pale blue background but your design tool has no opacity. Enter #2563eb on white at 10 percent and the solid colour is about #e9effd, which you can use anywhere. The 8-digit hex alternative is #2563eb1a, for tools that support it.

Remember the solid colour is only correct on that background.

Opacity in CSS

CSS gives you several routes: the opacity property affects the whole element and its children, rgba and hsla give a transparent colour only for that property, and 8-digit hex does the same. For text on images, use a semi-transparent background layer instead of reducing text opacity.

Also consider contrast: transparent text over varied backgrounds can be hard to read.

Choosing overlays for readability

Text over images often needs a dark overlay. An overlay of 40 to 60 percent black usually gives enough contrast for white text without hiding the picture completely. Try values in the tool and read the solid colour that results.

Test over the lightest part of the image, because that's where text is hardest to read.

Layering several overlays

When overlays stack, each blends with whatever is beneath it. Run the calculator twice, first with the lower layer over the background, then with the upper layer over that result. The order matters, because blending isn't symmetrical.

For many layers, it's easier to let the browser do it with CSS.

Questions