Alpha Channel

What alpha means

Alpha describes how much of the underlying content should show through. When a semi-transparent color is placed over a background, the final rendered color is a blend of the two, weighted by the alpha value:

output = foreground × alpha + background × (1 − alpha)

If alpha = 1.0  → output is 100% foreground
If alpha = 0.0  → output is 100% background
If alpha = 0.5  → output is 50/50 blend

Alpha is a linear 0–1 scale, not a percentage in the mathematical sense. Doubling the alpha value does not necessarily double the perceived opacity — perception of transparency is non-linear.

How alpha is written

How HEX alpha maps to 0–1

In an 8-digit HEX code, the last two characters are the alpha value written in hexadecimal. To convert:

#FF0000FF  → alpha 0xFF = 255 → 255 / 255 = 1.00 (opaque)
#FF000080  → alpha 0x80 = 128 → 128 / 255 = 0.50
#FF000000  → alpha 0x00 = 0   → 0 / 255   = 0.00 (transparent)

Alpha vs CSS opacity

Both CSS opacity and alpha control transparency, but they work differently:

In practice, prefer alpha on individual colors. Using opacity on a parent element also fades its text, borders, images and children — which is rarely what you want.

Pre-multiplied vs straight alpha

There are two conventions for storing color with alpha in memory:

• Straight alpha — the RGB channels store the original color, and alpha is separate. rgba(255, 0, 0, 0.5) means red at half opacity.
• Pre-multiplied alpha — the RGB channels are already multiplied by the alpha value. The same red at half opacity is stored as rgb(127, 0, 0) with alpha 0.5.

CSS and most image formats use straight alpha. GPU rendering and compositing use pre-multiplied alpha for performance and to avoid halo artifacts during filtering. You rarely need to think about this in normal CSS work, but it matters if you are doing image manipulation.

Alpha and accessibility

Semi-transparent colors are one of the most common accessibility problems in modern interfaces. If you place rgba(0, 0, 0, 0.5) on a background, the final text color is a blend of black and the background — not the raw black. This means:

• The contrast ratio must be calculated against the blended color.
• If your background can change (e.g. images, gradients), the same alpha produces different contrast.
• For text and important UI, prefer solid colors over translucent ones.

Use the contrast checker to test alpha colors against a background — it flattens alpha automatically.

Practical syntax

/* Solid */
color: rgb(79 70 229);

/* 50% opacity via alpha */
color: rgb(79 70 229 / 0.5);
color: #4F46E580;
color: hsl(243 75% 59% / 0.5);
color: oklch(53% 0.24 273 / 0.5);

/* Prefer color alpha over CSS opacity */
/* Not ideal */
.card { opacity: 0.5; }

/* Better — only the background is translucent */
.card { background: rgb(255 255 255 / 0.5); }

Continue reading

Frequently asked questions