Schema eines Bildpunkts im RGBA-Format: vier nebeneinanderliegende Wertebalken für Rot, Grün, Blau und Alpha mit Zahlen von 0 bis 255, rechts daneben das Ergebnis als halbdurchsichtige Farbfläche über einem karierten Hintergrund.

RGBA format

The RGBA format describes a color on screen using four numbers: the proportions of red, green, and blue, plus a value for transparency. It is the common way that graphics programs, websites, and games store colors with transparent areas.

Every pixel on a screen is made up of three tiny light elements in red, green, and blue. Mixing these three colors of light can produce virtually any visible color. The RGBA format specifies exactly how strongly each of the three colors should glow for a given pixel. Added to this is a fourth value, the A. It stands for opacity: it indicates whether the point is fully visible, half transparent, or not visible at all. The four letters thus stand for red, green, blue, and the English term alpha for this transparency.

Why transparency needs its own value

Without the fourth value, every image would be a solid rectangular block. A company logo would always have a white box around it. This is exactly what you sometimes still see with old image files in JPEG format, which does not support transparency. With an opacity value, on the other hand, an image can have any outer shape, because the corners are simply set to invisible.

The second major benefit is layering. A weather app displays a rain map semi-transparently over a street map. A game overlays smoke, glass, or shadows over the scene behind it. In all these cases, the program needs to know how much of the background should still show through. This information is stored in the alpha value.

A common misconception: transparency does not automatically mean white. A transparent pixel still has a stored color; it is simply not displayed, or only partially displayed. Anyone who converts an image with transparency into a format without an alpha channel often gets surprising edges or black areas as a result.

Four numbers per pixel

In the most common case, each of the four values gets eight bits of storage. This allows for 256 gradations, i.e. numbers from 0 to 255. Red 255, green 0, blue 0 produces a vivid red. All three at 255 produces white, all three at 0 produces black. The combinations produce around 16.7 million colors, more than the eye can distinguish.

The alpha value runs on the same scale. 255 means fully opaque, 0 means completely invisible, 128 means roughly half transparent. On the web, the same value is often written as a decimal number between 0 and 1, such as rgba(255, 0, 0, 0.5) for semi-transparent red. Both notations mean the same thing.

When displaying an image, the program calculates the layers together. If a red point that is 30 percent opaque lies over a white background, a light pink results. This calculation is called alpha blending. Important for practical purposes: four values times eight bits equals 32 bits, i.e. four bytes per pixel. An image with one million pixels takes up around four megabytes uncompressed. This is why such images are almost always stored in compressed form.

Where RGBA appears in files and code

The best-known example is the PNG format, which supports transparency and is therefore common for logos, icons, and screenshots. The newer WebP format also works with an alpha channel. Anyone who sets a layer to semi-transparent in a graphics program like Photoshop or the free GIMP is changing exactly this fourth value.

In programming, RGBA is encountered mainly on the web. In CSS, the language for the appearance of web pages, rgba() is used to create colored areas that let the content beneath show through. Game engines and 3D programs use the same principle for glass, water, and fog.

The format also plays a role in AI image generators. Tools that automatically remove backgrounds deliver their result as an image with an alpha channel. The cut-out subject remains visible, while the rest is set to transparent. For clarity: RGB without A is the same color model without transparency, and CMYK, with cyan, magenta, yellow, and black, is the counterpart for printing, where colors do not emit light but absorb it.

Subscribe free. Unsubscribe the second it sucks.

High-signal news across AI, business, UX, and tech. Every morning.