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)

What RGBA to RGB conversion means

A semi-transparent RGBA color works fine in modern CSS and design tools, but it won't render as intended in environments that can't interpret transparency, such as many email clients and older rendering engines. This tool takes a foreground color (RGBA) and a background color and calculates the flattened, opaque RGB color that would actually be visible once the two are composited — output in a form you can drop straight in as a fallback for environments where transparency isn't supported.

The calculation is based on a compositing method known as "alpha blending" (the "over" operator): each channel (R, G, and B) of the foreground color is multiplied by the alpha value, each corresponding channel of the background color is multiplied by (1 − alpha value), and the two products are added together. Because this formula is applied independently to each of the three channels, the same semi-transparent color produces a completely different result depending on the background it's placed over. When preparing a fallback color, it's essential to specify the exact background color the element will actually sit on.

How to use the RGBA to RGB converter

  1. Specify the foreground color (semi-transparent) Pick it with the color picker, or paste in a HEX code you've already confirmed in a design tool.
  2. Adjust the opacity (alpha value) Set the transparency using the 0-100% slider. Match it to the value you're actually using in your CSS.
  3. Specify the background color Use the white or black preset buttons, or enter a custom value close to your page's actual background.
  4. Check the flattened result (opaque RGB) The HEX and RGB string are calculated instantly, alongside a side-by-side comparison of how the color looks on white and black.
  5. Paste the calculated RGB value in as a fallback Copy it directly into properties such as `background-color` where `rgba()` isn't supported.

Tips for getting more out of it

  • 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.

Where an RGBA to RGB fallback color comes in handy

Background-color fallbacks for HTML email

For email clients that don't interpret `rgba()` — certain versions of Outlook among them — you can specify a precomputed opaque RGB value as `background-color` ahead of time.

Color values for older browsers or PDF export

Precompute the color to hand off to rendering engines that don't support transparency, or to PDF-export tools that don't honor CSS alpha values.

Checking color combinations in a design comp

See exactly what color results from layering semi-transparent elements, as an exact number, without needing to open Photoshop or another editor.

Verifying appearance in both light mode and dark mode

Use the white and black background presets to compare how the same semi-transparent color changes across both themes at once.

Producing a fixed semi-transparent variant of a brand color

Export a brand color at a given alpha value as a fixed, final color over a specific background, ready to add to a brand style guide.

Glossary

RGBA
A color format that adds an alpha channel — representing opacity — to the three primary channels red, green, and blue. In CSS it's written like `rgba(255, 0, 0, 0.5)`.
Alpha value
A number expressing a color's opacity, given as a decimal from 0 (fully transparent) to 1 (fully opaque), or equivalently as a percentage. The lower the value, the more the background shows through.
Alpha blending
The calculation that mixes a semi-transparent foreground color with a background color, in a ratio determined by the alpha value, to produce a single opaque color. Also called the "over" operator, and the basis for the formula this tool uses.
Hex color code (HEX)
A representation of the RGB channel values written in hexadecimal in the form `#RRGGBB`. One of the most widely used ways to specify color in CSS and design tools.
Fallback color
An alternative value prepared in advance, for cases where the representation you actually want to use — in this case a semi-transparent color — isn't interpreted correctly in a given environment.
Over operator
The most basic form of alpha blending, referring to the process of placing a foreground color "over" a background color. It's exactly the formula this tool implements.

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.
Tool-kun

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

People who viewed this tool also viewed

RGB to Hex Color Code Converter (and Hex to RGB) — Free, No Sign-Up

Enter an RGB value or a hex color code to convert it instantly the other way. Works both RGB-to-hex and hex-to-RGB, so you get a code ready to paste into CSS or your design tool right away — free, no sign-up required.

Color Model Converter (RGB, HSL, HSV, CMYK)

Enter a HEX color code or pick one with the color picker to instantly convert it into RGB, HSL, HSV (HSB), and CMYK values, all shown side by side.

Contrast Ratio Checker (WCAG Compliance Check)

Enter two colors to calculate the WCAG (Web Content Accessibility Guidelines) contrast ratio and check compliance with the AA and AAA standards.

Color Blindness Simulator

Free tool that simulates how a color appears to people with protanopia, deuteranopia, or tritanopia (color vision deficiency).

Color Palette Reference — Copy Standard Web & Material Design Colors

A reference collection of go-to design palettes — standard web colors, the Material Design color system, and a grayscale ramp — each with a HEX code and a one-click copy button.

Extract Colors from an Image (Dominant Color Extractor)

Upload an image to automatically extract its dominant colors — the representative colors used in a photo or illustration. All processing happens entirely in your browser; the image is never sent to a server.