🌗 Alpha Blend Calculator
Enter a foreground color, a background color, and an opacity to see the flattened, opaque color they produce together — the same maths behind CSS rgba() and opacity.
🧮 Blend Two Colors
What is an Alpha Blend Calculator?
It composites a semi-transparent foreground color over a solid background color and returns the flat, opaque result — exactly what a browser renders when you apply CSS opacity or an rgba() alpha channel over a known background.
Use it to check the real contrast of translucent overlays and glassmorphism panels, to convert a designer's "70% white over dark navy" spec into an exact hex value for a style guide, or to sanity-check how a semi-transparent brand color will actually look on different page backgrounds.
❓ Frequently Asked Questions
How does the alpha blend calculator work?
Enter a foreground color, a background color, and the foreground's opacity (0–100%). For each red, green, and blue channel, it computes fg × alpha + bg × (1 − alpha) — the standard "over" compositing formula browsers use for CSS rgba() and opacity — and combines the results into one flat hex color.
Why would I need to flatten a transparent color?
Semi-transparent colors (rgba(), opacity, alpha channels) look different depending on what's behind them. Flattening tells you the exact opaque color a design will actually render as on a specific background — useful for accessibility checks, exports, or design specs that require solid colors.
Is this the same as how CSS opacity works?
Yes, for a single layer over a solid background — this uses the same linear alpha-compositing formula as CSS rgba() and the opacity property. Multiple stacked transparent layers would need the formula applied repeatedly, once per layer.
What happens at 0% and 100% opacity?
At 0% opacity the foreground is fully invisible, so the result equals the background color exactly. At 100% opacity the foreground is fully solid, so the result equals the foreground color exactly, regardless of what the background is.