Opacity Calculator

You've placed a 60% black overlay on top of a hero image and now you need to know what the resulting color actually is so the buttons sitting on it have enough contrast to pass an accessibility audit. Pulling up Photoshop just to eyedrop the result feels like overkill.

Feed in your foreground color, its alpha value, and the background it's sitting on. The math is the standard alpha-compositing formula — the output is the flat RGB color you'd see after the blend. From there you can plug it into a contrast checker or use it as a solid fill so a screenreader-friendly version of the design doesn't depend on transparency rendering correctly.

The formula is simple per channel: result = foreground × alpha + background × (1 − alpha). Run that for red, green, and blue separately and you have the composited color. So a 60% black overlay (rgb 0, 0, 0 at alpha 0.6) on a white background (rgb 255, 255, 255) produces 0×0.6 + 255×0.4 = 102 on each channel. The result is rgb(102, 102, 102), which is hex #666666. Plug that into a WCAG contrast checker against your button color and you'll know whether the design holds up.

A more interesting example: a 50% red overlay (rgb 255, 0, 0 at alpha 0.5) on a green background (rgb 0, 128, 0). Per channel: 255×0.5 + 0×0.5 = 127.5 for red; 0×0.5 + 128×0.5 = 64 for green; 0×0.5 + 0×0.5 = 0 for blue. The composite is rgb(128, 64, 0) — a muddy brown. This is why overlays on photos often look like dirty laundry: the math averages colors across the cube and lands in muddy mid-tones unless you pick foreground colors that complement the background hue.

The limitation worth knowing: this is plain alpha compositing in the sRGB color space, which is not perceptually uniform. A 50% black overlay reduces lightness by exactly half mathematically, but your eye reads the result as more than half darker because human brightness perception follows a gamma curve. If you want perceptually accurate blending, you need to convert to linear RGB first, blend there, and convert back. Most design tools don't do that by default — Figma and CSS use sRGB blending, which is why the math here matches what you'll actually see in the browser. For exact production matching, pick the same blending mode the rendering pipeline uses.