The color opacity mixer flattens a semi-transparent color over a background into a single solid color. When you place an rgba() overlay on a page, the eye sees a blend of the overlay and whatever is behind it. This tool computes that blend exactly so you can capture it as an opaque hex value.
How it works
Standard source-over alpha compositing mixes each colour channel independently using the foreground alpha as a weight:
result = foreground * alpha + background * (1 - alpha)With alpha between 0 and 1, this is applied to the red, green, and blue channels separately. An alpha of 1 returns the foreground unchanged; an alpha of 0 returns the background; an alpha of 0.5 gives the exact midpoint average of the two colors.
Each resulting channel is rounded to the nearest integer in the 0–255 range and reassembled into a hex code.
Example
Blend foreground #ff0000 (red) at 50% over a white background #ffffff:
- R: 255 * 0.5 + 255 * 0.5 = 255
- G: 0 * 0.5 + 255 * 0.5 = 128
- B: 0 * 0.5 + 255 * 0.5 = 128
The flattened color is #ff8080, a soft pink — exactly what 50% red over white looks like.
All math runs locally in your browser — your colors are never sent anywhere.