Opacity Calculator
Preview any color at different opacities and copy the rgba() value.
Over white (#ffffff)
#629BF8
Over dark (#1a1a1a)
#346DCA
CSS values
Understanding color opacity in CSS
When you set background-color: rgba(59, 130, 246, 0.5) in CSS, the browser blends the color with whatever is behind it. This tool shows you the result of that blending over two common backgrounds — white and dark — so you can verify the effective color before writing a line of code. The blended hex is computed as bg × (1 − α) + fg × α per channel.
rgba() vs opacity property
There are two ways to make an element semi-transparent in CSS. The opacity property affects the entire element including its children and text. The rgba() color function only makes the background (or border, or shadow) transparent — child text stays fully opaque. For overlays, backgrounds, and shadows, prefer rgba().
Frequently asked questions
What is the difference between rgba() and hsla()?
Both add an alpha channel — the last value controls opacity from 0 (fully transparent) to 1 (fully opaque). rgba() uses red, green, blue channels (0–255). hsla() uses hue, saturation, and lightness, which many designers find easier to reason about. Both are fully supported in all modern browsers.
Why does the effective color over dark look different from over white?
Opacity blending always depends on the background. The same rgba color blended with white pulls towards a tint, while blending with a dark background pulls towards a shade. This is why it is critical to preview overlays against the actual background color they will appear on in production.
