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.
Why you need to flatten a transparent color
Transparency works in a browser because the rendering engine composites layers at paint time. But many systems cannot use transparency:
- Design tokens and style guides — when documenting a disabled-state color as a token, a value like
rgba(0,0,0,0.38) over #ffffffis hard to reference. The flattened equivalent#9e9e9ecan be used directly. - SVG and PDF export — some exporters flatten transparency before writing; knowing the flattened value in advance avoids surprises.
- Email clients — several desktop email clients poorly support RGBA backgrounds; using the pre-computed opaque hex avoids rendering differences.
- Color contrast calculations — WCAG contrast ratio is defined between two opaque colors. If your text has an RGBA color, you must flatten it against the expected background before checking contrast.
- Screenshots and headless rendering — tools like Puppeteer and Playwright composite over a default white or transparent background; if the background differs from what you expected, the apparent color differs too.
Common alpha values and what they produce
Over a white background (#ffffff), here is what different alpha levels look like for a pure black overlay (#000000):
| Alpha | Flattened hex | Effect |
|---|---|---|
| 0.05 | ~#f2f2f2 | Barely visible tint |
| 0.12 | ~#e0e0e0 | Subtle divider shade |
| 0.26 | ~#bdbdbd | Disabled state (Material Design) |
| 0.38 | ~#9e9e9e | Hint text |
| 0.54 | ~#757575 | Secondary text |
| 0.87 | ~#212121 | High-emphasis text |
| 1.00 | #000000 | Fully opaque |
These values come from Google’s Material Design opacity scale, which uses alpha-over-white as its token system for text hierarchies.
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.