A half-opaque red looks pink over white and dark red over black. The RGB values can stay the same in both cases: the background supplies the rest of the visible color.
When you add an alpha value to RGB, you describe how much of that color covers what is behind it. You can also turn the result into an opaque RGB value for a particular background, but that flattened value will no longer adapt to a different one.
RGB to RGBA: Add an alpha value
RGB describes a color with red, green, and blue channels. In common CSS notation, each channel can be a number from 0 to 255. Add alpha to RGB and you get a fourth value describing opacity: 0 is fully transparent, 1 is fully opaque, and 0.5 is halfway between.
For example, begin with opaque rgb(200, 100, 50). To change RGB to RGBA at half opacity, keep the three channels and add alpha: rgba(200, 100, 50, 0.5). You have selected a new opacity, so the appearance over a background will change. If you need the original opaque appearance, use an alpha of 1 instead.
In modern CSS, you can also write the same half-opaque color as rgb(200 100 50 / 50%). The slash introduces alpha; the percentage and decimal forms express the same amount. CSS treats rgba() as an alias of rgb(), as the MDN reference explains. Keep the commas in the older form or use spaces and a slash in the modern form.
Make RGB transparent by specifying an alpha below 1. At 0, the background shows through completely; the stored red, green, and blue values still describe the color, even though they do not contribute to the visible result at that pixel.
Predict the result on a background
To understand RGB with opacity, imagine a sheet of colored glass laid over a solid surface. Both contribute to the final appearance. For a normal source-over composite on a fully opaque background, calculate each channel separately:
result = foreground × alpha + background × (1 − alpha)
Use the same color space and channel scale for both colors. This example uses the displayed sRGB channel values on a 0–255 scale, with normal compositing and no extra blend mode. The W3C compositing specification describes the underlying operation.
Place rgba(200, 100, 50, 0.5) over white, rgb(255, 255, 255):
- Red:
200 × 0.5 + 255 × 0.5 = 227.5 - Green:
100 × 0.5 + 255 × 0.5 = 177.5 - Blue:
50 × 0.5 + 255 × 0.5 = 152.5
Rounded to whole channel values, the visible result is rgb(228, 178, 153). Over black instead, the same foreground gives rgb(100, 50, 25). The numbers make the background’s role concrete: changing it changes the result, even when the foreground and alpha stay fixed.
Flatten RGBA to RGB
A conversion from rgba to rgb needs a background if the goal is to preserve the visible appearance. For the white-background example, use rgb(228, 178, 153) as the opaque approximation. It matches the composite on white; it will remain that same pale color when placed on black.
Simply dropping the fourth value produces rgb(200, 100, 50), a darker opaque color. It is the original foreground at full strength, not the blended result. If an editor offers to remove transparency, check which background or matte it uses before exporting. The choice affects edge pixels as well as large translucent areas.
The reverse step has a different limitation. Adding alpha to an RGB color is a choice, not a way to recover the transparency that may have produced it. Many combinations of foreground, alpha, and background can yield the same visible color. If you still have the original layers, keep them: a flattened image cannot uniquely reveal them.
Use the right kind of transparency
A transparent RGB color is useful for an overlay that must respond to changing artwork underneath. Test it on the actual light and dark backgrounds where it will appear. A checkerboard in an editor usually signals transparency; it is not itself the final background. Place a solid layer behind the artwork to judge the composite.
In CSS, setting an alpha on a background color affects that color. Setting the opacity property on an element affects the element and its contents together, including text. Choose the former for a translucent panel with solid text, then check that the text remains readable against the resulting background.
Use an RGB value with an alpha channel when the background can change. When you need a fixed opaque color, composite the RGBA value over the intended background and record that background alongside the result.
