Opacity Calculator

The opacity calculator composites a foreground color over a background at any opacity and reports both the resulting solid color and the hex-with-alpha equivalent.

What is Opacity Calculator?

The opacity calculator takes a background colour, a foreground colour and an opacity percentage, and returns the flattened result. Below the result swatch it prints a CSS declaration — the foreground colour written as an eight-digit hex value whose last two digits carry the alpha. Everything updates as the sliders and colour fields move.

The problem it solves is one of the most common sources of colour bugs in interface work. A translucent colour has no single appearance: what you see depends entirely on what is behind it. A white overlay at twenty percent over a dark header is a mid grey; the same overlay over a photograph is unpredictable. Developers write the alpha value and test it against one background, then ship it into a component that sits on another, and the result either disappears or muddy. Calculating the composite in advance turns an assumption into a number.

• The arithmetic behind the flattened value is straightforward.
• Each channel of the result is the background channel plus the difference between the foreground and background channels, scaled by the opacity.
• At zero percent the result is exactly the background, at one hundred percent exactly the foreground, and in between it moves linearly along the line between them.
• That linear movement in the red, green and blue channels matches how browsers composite opaque layers over each other, which is why the swatch and the browser agree rather than approximately agreeing.

The declaration underneath is the other useful half. It expresses the same colour as a single eight-digit hex value — six digits for the colour and two for the alpha — which is a portable way to write translucency when you already know the surface it will sit on. Setting that flattened value instead of a translucent one removes a dependency on the backdrop: the element will look the same whatever is behind it, which is exactly what you want for a badge, a tag or a chip that appears in several contexts.

The obvious workflow is to settle the appearance first and the notation second. Set the two colours, drag the opacity slider until the composite looks right, and then choose which of the two outputs you need: the flattened colour for a fixed surface, or the hex-with-alpha value for a translucent layer you intend to keep. Comparing the two is itself instructive — it shows how much a translucent token's appearance depends on context.

Two limits are worth knowing.

• Anyone who has asked what color does 50 percent opacity look like over a given surface will recognise the problem this solves, and here it is answered exactly rather than approximately.
• The composite is calculated in the standard eight-bit sRGB channels that browsers use by default, so it will not match an application that composites in a linear-light space; for web work that is the right choice, and for print or film pipelines it is not.
• And there is no support for stacking several translucent layers — one foreground over one background is the whole computation, so three layers means three passes.

Used as an alpha blending calculator, it answers a question that otherwise requires a screenshot and a colour picker: what colour does this actually end up being. As a way to work out what a color with transparency over background produces, or to derive the hex with alpha that reproduces it, it is quicker than the loop of guessing, rendering and sampling.

How to use Opacity Calculator

1. Set the Background colour to the surface the element will actually sit on.
2. Set the Foreground colour to the translucent colour.
3. Drag the opacity slider until the flattened result looks right.
4. Copy the result as a solid colour, or the declaration underneath as a hex value with alpha.

When to use Opacity Calculator vs related tools

Use this when a translucent colour needs to be judged against a specific surface, or when a flattened equivalent is needed so an element looks the same everywhere. Use the contrast checker when the question is legibility rather than appearance. The opacity layering calculator is the same arithmetic framed as a stack to flatten, and the contrast checker is what to run on the flattened value before it carries text.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Opacity Calculator