RGBA Alpha Channel — What Each Number Means

A junior sets rgba(0, 0, 0, 0.5) on a modal backdrop and on an inner panel. The UI looks like a cave. Alpha feels obvious until stacking and parent opacity enter the chat. This guide is the mental model that stops “make it lighter” from becoming five translucent layers fighting each other.

Reading rgba(r, g, b, a)

rgba(15, 118, 110, 0.75)
/*   R    G    B    A   */

Channel	Range (classic)	Meaning
R	0–255	Red
G	0–255	Green
B	0–255	Blue
A	0–1	Opacity of this color paint

Modern CSS also allows rgb(15 118 110 / 75%) — same idea, clearer alpha. Alpha does not mean “mix with white” by itself. It means “blend this color with whatever is already behind it.” On a white page, translucent black looks gray. On a photo, the same rgba samples the photo.

Hex forms and handoff

#0f766e      → RGB only (opaque)
#0f766ebf    → RGB + alpha (~0.75)

Design tools disagree on whether they export hex6, hex8, or rgba(). Convert explicitly when tokens move between Figma and CSS. A RGBA ↔ hex converter keeps handoff from inventing near-miss tokens (#0F766E vs rgba(15,118,110,1)). Near-miss colors are how brand “teal” becomes three slightly different teals in production.

Stacking: why things go muddy

<div class="scrim">           <!-- rgba(0,0,0,.5) -->
  <div class="card">          <!-- rgba(0,0,0,.5) again -->
    Content
  </div>
</div>

Each layer composites over the previous. Two 50% black scrims do not equal one 50% scrim. Prefer one scrim on the overlay root, opaque or high-alpha surfaces for cards, or a single design-system token such as bg-overlay. If text must sit on photography, put a solid or high-alpha chip behind the text instead of thinning white to 0.2.

opacity vs alpha in the color

.panel {
  background: #fff;
  opacity: 0.5; /* fades text, borders, children */
}

.panel {
  background: rgba(255, 255, 255, 0.5); /* text can stay opaque */
}

Use color alpha for translucent surfaces. Use element opacity when you intentionally fade an entire control — and accept that children fade too — or for enter/exit animations. Mixing both without a plan is a common accessibility failure: text that looked fine in the mock becomes washed out.

Premultiplied confusion (brief)

GPUs and some image pipelines store premultiplied alpha. As a CSS author, you usually set straight alpha in rgba(). When exporting icons with soft edges from design tools, verify transparent pixels are not already darkened as if premultiplied. Symptoms look like dirty fringes or muddy halos around logos.

Practical recipes

Goal	Approach
Modal backdrop	One full-viewport rgba(0,0,0,.4–.6)
Frosted card	Opaque/high-alpha fill + optional backdrop-filter
Text on photo	Solid or high-alpha chip behind text
Theme tokens	Store RGB + separate alpha step, or hex8 consistently

Also decide whether dark mode needs different alpha. A 0.4 black scrim on light UI may need a lighter or denser scrim on dark UI so contrast stays intentional.

Debugging checklist

1. Count how many translucent layers sit between text and the page photo.
2. Check parent opacity on ancestors.
3. Confirm whether Figma’s percent matches CSS 0–1.
4. Convert hex8 ↔ rgba before arguing about “wrong brand color.”
5. In DevTools, inspect computed background, not only the token name.

RGBA’s fourth number is coverage, not magic darkness. Set alpha once per visual job, keep text on opaque fills when readability matters, and convert formats explicitly so design and CSS talk about the same channels. When the UI goes muddy, remove a layer before you tweak the fourth number again.