A semi-transparent color isn't a fixed color
Opacity (or alpha) describes how much of a color shows through versus how much of whatever is behind it shows through — which means the actual rendered color of a semi-transparent element depends entirely on what it's placed over. The same 50%-opacity red renders as a soft pink over a white background, a muted dark red over black, and something else entirely over a photograph or gradient. "Flattening" is the process of computing that final, single, opaque color for one specific background, which is a genuinely different calculation from just reading off the alpha value in an RGBA or 8-digit hex color.
The compositing formula
For each color channel, the flattened result is a weighted average of the foreground and background values, weighted by the alpha: result = foreground × alpha + background × (1 − alpha). At alpha 1 (fully opaque), the formula reduces to just the foreground color, ignoring the background entirely, which matches intuition — a fully opaque color hides whatever is behind it. At alpha 0, it reduces to just the background, since a fully transparent foreground contributes nothing. Every value in between blends proportionally, which is exactly what a browser or image editor does internally whenever it renders a semi-transparent layer over content beneath it.
Two worked examples
Pure red (#FF0000) at 50% opacity over white (#FFFFFF) flattens to#FF8080 — the red channel stays maxed out (255 blended with 255 is still 255), while green and blue rise from 0 halfway to 255, landing at 128, producing a soft pink. The same red at 25% opacity over black (#000000) instead flattens to #400000 — a dark, muted red, since only a quarter of the red channel's intensity carries through and there's no white background pulling the other channels up. Same foreground color, same opacity level applied differently, and two very different final backgrounds produce two very different flattened results — which is the entire point of checking the actual composited color rather than assuming a fixed appearance.
Why this matters for design handoff and screenshots
Design tools typically preserve a layer's opacity as metadata, so a designer can keep adjusting a semi-transparent element non-destructively. But once that design is exported as a flat image, or implemented as CSS on a specific background, the effective color becomes fixed and opaque — and if a developer needs to match that exact rendered color elsewhere (in a context that doesn't support transparency, for instance, or when generating a static image asset), they need the flattened value, not the original semi-transparent color and opacity separately. This tool exists specifically to compute that composited value without needing to open a design tool or take a color-picker reading off a rendered screenshot.
Opacity versus a genuinely lighter color
It's worth distinguishing a semi-transparent color from an opaque tint that merely looks similar. A 50% opacity red over white and a 50% tint of red (blended toward white directly, with no transparency involved) can produce very close or even identical results depending on the background, but they mean different things: the transparent version changes appearance if the background changes, while a tint is a fixed, opaque color that looks the same regardless of what's behind it. If the goal is a genuinely fixed lighter color rather than a background-dependent transparency effect, thetint and shade calculator is the more direct tool.
Compositing over more than one layer
This tool composites a single foreground color over a single solid background. Real interfaces sometimes stack multiple semi-transparent layers on top of each other, which requires repeating the compositing formula once per layer, working from the bottommost layer upward — each step's result becomes the "background" for the next layer above it. For a two-layer stack, running this tool's result through itself again with the next layer's color and opacity produces the correct final value; for complex multi-layer stacks, that iterative approach is the general method, just applied more than once.