Method & sources

Follow the channels, then choose the export.

Alphaflat answers a narrow question: what opaque colour results when one constant foreground, at a chosen opacity, is composited over one opaque background using direct arithmetic in encoded sRGB? It exposes both the exact channel result and the chosen 8-bit export.

Enter an unambiguous colour

Use # followed by six hexadecimal digits for each colour. Letter case does not matter; surrounding whitespace is ignored. #2468AC means red 36, green 104 and blue 172 on the 0–255 encoded sRGB scale. Three-digit shorthand, alpha-bearing hex, names, CSS functions and colour profiles are outside this version. The background is always fully opaque.

Enter foreground opacity as a decimal percent from 0 to 100. Up to twelve fractional digits are accepted. Both 0.5 and .5 mean half of one percent. Signs, scientific notation, a trailing decimal point and a percent sign inside the field are rejected. Nothing is silently clamped into range.

The exact source-over calculation

Let F be one foreground channel, B the corresponding background channel, and a the foreground opacity divided by 100. With normal source-over and an opaque background, the output alpha is one.

O = a × F + (1 − a) × B
alpha_out = a + (1 − a) × 1 = 1

The same equation is used independently for red, green and blue. Decimal opacity is parsed as a rational number. For example, 25% becomes exactly 1/4, so a channel with F = 36 and B = 240 becomes 36/4 + 3 × 240/4 = 189. Fractions are retained through the calculation instead of rounding opacity first.

Rounding is an export decision

The exact result may fall between integers. Alphaflat exports the nearest 8-bit integer and rounds an exact .5 upward. Thus 100.8 becomes 101, 79.2 becomes 79 and 127.5 becomes 128. That rule is this tool's explicit export choice, not a claim about every rendering system.

The decimal column is rounded to at most twelve places for reading. Export decisions use the exact fraction, not that display. A value extremely near a half can therefore look identical in the decimal column while its exact fraction explains a different rounding direction. Each exported channel differs from its exact result by at most 0.5.

Why the background changes the answer

A translucent foreground lets the background contribute. Once you export a solid hex, that relationship is baked into a fixed colour. Placing the exported token over a different surface does not reproduce the original foreground opacity. Recalculate for each known opaque background rather than expecting one token to adapt.

Encoded is not linear-light

This calculator deliberately weights encoded sRGB channel numbers directly. It does not decode sRGB's transfer function before combining channels. Linear-light compositing would perform that decoding, combine the light values and encode them again, which is a different operation. The solid swatch displays the rounded exported hex; it is not a demonstration or measurement of a browser's transparent-layer compositing pipeline.

Sources and chosen limits

The W3C Compositing and Blending source-over equations provide the channel and alpha relationships. The W3C CSS Color hex notation and colour-space definitions explain opaque six-digit sRGB colours and distinguish encoded sRGB from linear-light sRGB. Alphaflat's twelve-decimal input bound, readable decimal precision and half-up export rule are product decisions.

No contrast or accessibility judgement, image processing, physical paint prediction, inverse recovery or universal pixel-match guarantee is supplied. See the worked arithmetic before relying on a token in a particular workflow.