Alpha, Transparency and Opacity in CSS Colors

Alpha is the fourth number in a color. Red, green and blue say which color it is; alpha says how much of it covers whatever sits behind. At 1 (or 100%) the color is solid, at 0 it is invisible, and anywhere in between it mixes with the background.

Our guide to HEX, RGB and HSL shows how to write alpha in each format. This guide goes further: how the browser actually blends a see-through color, why the opacity property behaves differently, and why you can only judge contrast on the color that ends up on screen.

Three ways to make something see-through

• 8-digit HEX: #RRGGBBAA. The last pair is alpha from 00 to FF, so #6366F180 is the indigo at 128 out of 255, or about 50%. There's also a 4-digit short form, such as #0008.
• rgb() and hsl() with a slash: rgb(99 102 241 / 50%) or hsl(239 84% 67% / 0.5). The older rgba() and hsla() names still work and mean the same thing.
• The opacity property: opacity: 0.5 fades a whole element, including its text, borders, images and every child inside it.

The first two set the alpha of one color, such as one background or one border. The third works on a finished piece of the page. That difference is the source of most transparency bugs.

Alpha in HEX: a quick table

HEX alpha is a fraction of 255, so the common percentages don't land on round numbers. Multiply the percentage by 255, round, and convert to base 16.

• 100%: FF
• 90%: E6
• 75%: BF
• 50%: 80 (128, which is really 50.2%)
• 25%: 40
• 20%: 33
• 10%: 1A
• 0%: 00

Alpha versus the opacity property

Imagine a card with a white background and dark text, and you want the page behind to show through a little. If you give the card opacity: 0.5, the text fades too. If you give only its background a color with alpha, the text stays solid.

/* Fades everything: background, text, icons, children */
.card-faded {
  background: #ffffff;
  opacity: 0.5;
}

/* Fades only the background; the text stays solid */
.card-tinted {
  background: rgb(255 255 255 / 50%);
  color: #111827;
}

• Use alpha on a color when one layer should be see-through: an overlay, a tinted background, a soft border or a shadow.
• Use opacity when a whole thing should fade as a unit, such as an element fading in or out, or a disabled control where the faded text is intentional and still checked for readability.
• An opacity below 1 also creates a new stacking context, which can change how z-index behaves for the element's children.

How a transparent color blends

When a color with alpha is drawn over a background, the browser mixes the two channel by channel. For each of red, green and blue, the result is alpha times the color plus (1 minus alpha) times the background. This standard rule is called source-over compositing.

Take black at 50% over white. Each channel is 0.5 × 0 + 0.5 × 255 = 127.5, which rounds to 128, so you see #808080, a middle gray. Take the indigo #6366F1 at 50% over white. Red is 0.5 × 99 + 0.5 × 255 = 177, green is 178.5 and blue is 248, which gives #B1B3F8.

The same color looks different over a different background. Indigo at 50% over the near-black #111827 becomes #3A3F8C, a deep blue-violet instead of a pale lavender. A see-through color has no fixed appearance: it always depends on what's behind it.

Check contrast on the blended color

Contrast ratios compare two solid colors. A text color with alpha isn't solid, so before you can check it you need the color it turns into on its real background. Working this out is the only reliable test.

Here is the near-black #111827 used as text at falling opacity. On white, at full strength it reaches 17.73:1. At 80% it blends to #414652 and still gives 9.44:1. At 60% it becomes #70747D, only 4.68:1, just over the 4.5:1 that normal text needs. At 50% it becomes #888C93 and drops to 3.37:1, which fails.

Put the same 60% text on the light gray #F3F4F6 and it blends to #6B707A, at 4.51:1, barely passing. A slightly darker card, or a slightly lower alpha, and it fails. Transparent text that looks fine in one place can fail in another, which is why many design systems use solid gray values for secondary text instead.

Common uses

Overlays on images

A dark overlay helps white text sit on a photo. Because the photo changes from pixel to pixel, test the overlay against the lightest part the text will cover, and white is the worst case. Black at 40% over white gives #999999, and white text on it reaches only 2.84:1. At 50% it's #808080 and 3.94:1. At 60% it's #666666 and 5.74:1, enough for normal text.

On a bright yellow area such as #FDE047, where white text alone manages just 1.31:1, the same 60% black overlay gives #655A1C and 6.92:1. A gradient overlay that's darker only behind the text keeps more of the image visible.

Hover and pressed states

Layering a little black or white over a button gives hover and pressed states that always match its color. On an indigo #4F46E5 button with white text, at 6.28:1, a 10% black layer gives #473FCE and raises contrast to 7.31:1. A 10% white layer instead gives #6159E8 and lowers it to 5.11:1, and 15% white gives #6962E9 at 4.64:1, close to the limit. Darkening is usually the safer direction for white text.

For a ghost button, a 10% tint of the brand color behind indigo text works well. Indigo at 10% over white is #EDEDFC, and the indigo text on it still reaches 5.42:1.

Shadows

Shadows look natural when they're a dark, slightly tinted color at low alpha rather than solid gray. A shadow such as rgb(15 23 42 / 12%) darkens whatever is behind it by the same amount, so it works on white, on gray and on colored sections alike.

.card {
  box-shadow:
    0 1px 2px rgb(15 23 42 / 8%),
    0 8px 24px rgb(15 23 42 / 12%);
}

Glass effects

A frosted glass panel is a light color with alpha plus a blur of what's behind it, using backdrop-filter. As of November 2026, backdrop-filter works unprefixed in every major browser and has been Baseline since September 2024.

Contrast is the hard part, because the panel's final color depends on the content scrolling underneath. White at 70% over a dark navy #1E3A8A blends to #BCC4DC, where #111827 text gets 10.19:1. White at only 20% over orange #F97316 blends to #FA8F45, where white text falls to 2.31:1. Use enough alpha that the panel is mostly the glass color, and test it over the busiest, most colorful content it will cover.

.glass {
  background: rgb(255 255 255 / 70%);
  backdrop-filter: blur(12px);
  color: #111827;
}

Common mistakes

• Fading a whole card with opacity when only its background should be see-through.
• Checking the contrast of a transparent text color as if it were solid.
• Testing an overlay on a dark photo and shipping it on a light one.
• Reading 8-digit HEX as RGBA in the wrong order. In CSS the alpha pair always comes last.
• Using a light white layer for hover on a button that only just passes, and pushing it below 4.5:1.

Transparency is a blending tool, not a color in its own right. Treat the blended result as the real color, check it where it will actually appear, and alpha becomes one of the most useful parts of a palette.