Color · 0–1 or 0%–100%
Alpha channel
Opacity from fully transparent to fully opaque, in 0–1 or 0–255.
Key facts
| CSS range | 0–1 or 0%–100% |
|---|---|
| Hex form | #RRGGBBAA |
| Byte range | 0–255 |
| 0 means | Fully transparent |
| 1 means | Fully opaque |
| Compositing | Source-over by default |
Alpha is not a color mix
A 50% red over white looks pink, but the value is still red with alpha 0.5. If the background changes, the rendered color changes too. For a stable result, composite the color yourself and store the final opaque value.
Opacity versus alpha
The CSS opacity property applies to an entire element and its children, creating a group. Alpha in a color applies only to that color. A parent at 50% opacity dims everything inside it, including text and borders, which is rarely what a design intends.
Frequently asked questions
Does 8-digit hex work everywhere?
In current browsers yes. Older tools may ignore the alpha byte entirely.
Why does text look muddy over an image?
Semi-transparent text takes on the colors behind it, reducing contrast unpredictably. Use a solid overlay or an opaque text color.
Is alpha premultiplied?
In rendering pipelines it often is, but CSS colors are specified unpremultiplied. The difference matters when exporting textures.