Alpha channels and color opacity in CSS

Alpha describes opacity, not a replacement color

An alpha channel does not make an independent pale version of a color. It controls how much the foreground contributes when the renderer composites it over a backdrop. The visible result therefore depends on both colors and on any intermediate layers. The same rgb(0 0 0 / 50%) appears as middle gray over white, darker over gray, and may disappear over black. Alpha is commonly written as a number from 0 to 1 or a percentage from 0% to 100%. Values represent opacity: larger alpha means more foreground contribution, not more transparency.

The keyword transparent denotes a fully transparent color. It is useful for gradients and transitions, but a fully transparent endpoint still has color components that can matter during interpolation depending on the color space and interpolation rules. Authors should not assume that every transition toward transparent behaves like reducing only the alpha of the other endpoint. When exact interpolation matters, state both endpoint colors explicitly in the chosen syntax and test the gradient. For ordinary overlays, a color with an explicit slash alpha usually communicates intent more clearly than a generic transparent endpoint.

Eight-digit HEX puts alpha last

Eight-digit HEX uses #RRGGBBAA, so the alpha byte comes after red, green, and blue. #4F46E580 means red 4F, green 46, blue E5, and alpha 80. It does not mean an ARGB sequence. The four-digit shorthand #RGBA expands by repeating every digit, exactly as #RGB does. Because the alpha byte has only 256 discrete values, 80 hexadecimal equals 128/255, approximately 50.2%, not mathematically exact 50%. If a precise decimal percentage matters to source readability, functional notation avoids guessing the byte.

.alpha-examples {
  --overlay-a: #4f46e580;
  --overlay-b: rgb(79 70 229 / 50%);
  --overlay-c: hsl(243.4 75.4% 58.6% / 0.5);
}

Functional notation makes alpha explicit

Modern rgb(), hsl(), hwb(), lab(), and oklch() syntax places alpha after a slash. The alpha can be a number or percentage, which makes rgb(79 70 229 / 50%) easy to review. Legacy rgba() and hsla() names remain aliases for compatibility, but modern rgb() and hsl() already accept alpha. Alpha does not expand the color gamut and does not change the underlying channel coordinates. Keep channel units valid for the selected function, and do not mix legacy comma separators with the modern space-and-slash grammar in the same function.

• 0 and 0% are fully transparent; 1 and 100% are fully opaque.
• In #RRGGBBAA, AA is the final pair, never the first pair.
• The 8-bit value 80 represents 128/255, about 50.2% opacity.
• A slash alpha belongs to the color and leaves sibling paints unchanged.

Color alpha and opacity affect different scopes

A color-level alpha affects only that paint: for example, a translucent background does not automatically fade the text and children. The opacity property applies to the element as a whole after its contents have been rendered into a group, so descendants, borders, text, shadows, and backgrounds are faded together. This often makes opacity the wrong way to create a translucent panel behind fully opaque text. Pseudo-elements or separate layers are helpful when background translucency and foreground readability need independent control. Pointer behavior is also separate; opacity: 0 does not disable interaction by itself.

Compositing changes the visible channels

Compositing calculates the output from foreground, backdrop, and alpha. Multiple translucent layers compound, so copying the same alpha token into nested overlays does not produce one predictable final color without knowing the stack. Filters, blend modes, images, gradients, and backdrop effects add more dependencies. DevTools may display a resolved color, but the accessibility question concerns pixels produced in the actual state. Capture all backgrounds in the calculation, including hover, focus, disabled, selected, and modal-overlay states. A design-system swatch shown on white is not sufficient evidence for every component.

.notice {
  background: rgb(255 255 255 / 92%);
  border-color: rgb(15 23 42 / 18%);
}

.disabled {
  opacity: 0.55;
}

Accessibility requires the final background

WCAG contrast is evaluated between the final foreground and background colors. A translucent text color has no single contrast ratio independent of its backdrop. Likewise, an overlay can lower or raise the contrast of content below it. For text that must remain readable across varying images, use a controlled opaque or sufficiently stable backing surface, or calculate against the worst supported backdrop. Do not claim compliance from the uncomposited RGB coordinates. Large-text and normal-text thresholds depend on the content and conformance criterion, but both require resolved relative luminance values.

• Verify every supported backdrop and component state.
• Use color alpha for one paint and opacity only for deliberate group fading.
• Measure contrast after compositing, not from source channels alone.
• Keep interactive behavior explicit even when an element is visually transparent.

A reliable review workflow

Review alpha code by checking syntax, scope, state, and fallback. Confirm that #RRGGBBAA order is correct, that a byte was not copied from an ARGB API, and that a percentage was not interpreted as transparency. Decide whether the paint alone or the whole element should fade. Inspect the final result over every allowed backdrop and with forced-colors or user preferences where applicable. Keep alpha tokens named by purpose, such as overlay or border-subtle, instead of encoding an assumed background in the token name. Re-test whenever the background palette changes.