Hex Alpha Calculator That Admits 80 Is Not Exactly 50 Per Cent

How to Use This Tool

Type a colour, a background and an opacity. You get the eight-digit hex, the exact percentage, and the solid colour the layer flattens to.

80 is not 50 per cent

Alpha is stored as one byte, 0 to 255. Exactly half of 255 is 127.5, which is not a whole number, so no byte represents exactly 50%.

• 7F is 127 → 49.804%
• 80 is 128 → 50.196%

Charts pick one and print “50% = 80”. That is a reasonable rounding, not a fact, which is why two charts can disagree and neither is wrong. The gap is two tenths of a percent — invisible on screen, and relevant the moment two systems compare colour strings and expect a match.

Fifty is not a special case. Across the whole range only six whole percentages land on a whole byte at all: 0, 20, 40, 60, 80 and 100. Every other value in every opacity chart you have ever used is rounded, including the ones that look tidy.

opacity and alpha are not the same property

These look interchangeable and are not:

• background: #3B82F680 makes that colour semi-transparent. Text inside the element stays fully opaque.
• opacity: .5 makes the whole element semi-transparent after rendering, including every child. It also creates a stacking context, which can quietly change how z-index behaves elsewhere on the page.

Swapping one for the other usually looks similar in an empty box and diverges the moment the box has content.

The blend matches your browser, not colour theory

The flattened colour here is computed the way browsers composite: straight arithmetic on the gamma-encoded sRGB values. So 50% white over black gives #808080.

Physically that is wrong. Light does not add that way, and blending in linear space would give roughly #BCBCBC — which is what “half as bright” actually looks like. Browsers do it the simple way anyway, for compatibility reasons that predate anyone worrying about it.

This tool matches the browser deliberately. A calculator that produced the physically correct answer would disagree with every screenshot you take, and you would trust the screenshot.

Where the flattened value is worth having

Transparency costs a compositing layer, and semi-transparent text fails contrast checks in ways that are hard to reason about. If a colour always sits on a known background, using the flattened solid instead is cheaper, and it gives you a real value to run through a contrast checker.