RGBA to RGB Converter (Flatten onto a Background)

Enter a semi-transparent foreground color (RGBA) and a background color to calculate the flattened, opaque RGB color produced by alpha blending the two, for use as a fallback where rgba() is not supported.

The alpha blending formula

Converting RGBA to opaque RGB is known as "alpha blending" (the "over" operator). The following formula is applied independently to the R, G, and B channels, then the result is rounded to the nearest integer.

Formula result = foreground × alpha + background × (1 − alpha)

Tips

  • HTML email templates and older browsers (such as some versions of IE) sometimes don't support `rgba()` or `opacity`. Listing the opaque RGB value calculated here alongside `background-color` gives you a safe fallback.
  • Both the foreground and background color fields accept either the color picker or direct HEX input, so you can paste an exact color you've already picked in a design tool.
  • Opacity (the alpha value) is adjusted with a 0-100% slider. 0% is fully transparent (i.e. just the background color), and 100% is fully opaque (i.e. just the foreground color).
  • White and black are provided as background presets because they're the two most commonly compared cases in practice (light-mode and dark-mode backgrounds). For a more accurate fallback color, enter the actual background color used on your page as a custom value.

Frequently Asked Questions

Some email clients (notably certain versions of Outlook) and older browsers don't support CSS `rgba()` or alpha transparency at all. In those environments, the transparent portion may render incorrectly and break your design. By precomputing the opaque RGB value that results from blending your color with the background, you can specify a safe fallback for environments where `rgba()` isn't available, avoiding any visual mismatch.

A semi-transparent color carries both its own color information and the information showing through from the background beneath it, so the visible result always depends on the background. The same color will look darker and more muted over black, and lighter and softer over white. This isn't a bug — it's simply how alpha blending works — which is why you must specify the actual background color you'll be using when calculating a fallback color.

CSS alpha values are specified as a decimal from 0 (fully transparent) to 1 (fully opaque), or equivalently as a percentage from 0% to 100%. This tool uses a slider over the 0-100% range so you can adjust it intuitively.

As long as it's displayed over the exact background color you specified, it will look theoretically identical. However, that's only true for that specific background — placing it over a different background will change the appearance. When using this for a fallback, it's important to specify the actual background color of the page where the color will appear.
ツールくん

Side Note — The origins of alpha blending

The concept of alpha blending (alpha compositing) is generally traced back to a 1984 paper titled "Compositing Digital Images," published by Thomas Porter and Tom Duff in the field of computer graphics. Before that, compositing a foreground over a background typically dealt only with color information. That paper systematized the idea of pairing a fourth channel representing opacity — the alpha channel — with color data, and it went on to become the standard model used in CG and image-editing software ever since.

Today, nearly every technology that handles transparency builds on this idea of alpha blending: image formats like PNG and SVG, CSS's `rgba()` and `opacity`, and the layer features found in most paint software. The most basic compositing method, known as the "over" operator (placing a foreground on top of a background), is exactly the formula this tool uses.

Compatibility issues with older email clients and legacy browsers, however, haven't fully gone away even today. HTML email in particular is heavily constrained by rendering engines, and modern CSS transparency often simply can't be used as-is. That's why precomputing an opaque fallback color remains a widely used practical technique.

→ Read related trivia

→ Browse all trivia

More tools in this category