Colour opacity tool — rgba(), 8-digit HEX and the solid colour it makes

How to use the colour opacity tool

1. Pick the Colour with the picker or type a value such as #3b82f6 or tomato.
2. Drag Opacity from 0% (invisible) to 100% (solid).
3. Set the Preview background to the colour the element will sit on.
4. Copy the format you need: rgba(), 8-digit HEX, Modern rgb() or hsla().
5. Check the preview, which shows the colour over a checkerboard and over your background, and note the Looks like on value.

What it does and when to use it

Semi-transparent colours are everywhere in interfaces: overlays behind a modal, hover tints on buttons, soft focus rings, and shadows. This tool gives you the code for a colour at any opacity, and it answers the follow-up question designers often ask: what solid colour does that actually make on this background?

The solid value is useful when you need to check text contrast, export a flat colour to a design file, or replace a transparent colour with an opaque one. If you need Android’s alpha-first ARGB order or a table of hex alpha suffixes, use the HEX to RGBA converter. For the blending maths with any two colours, see the alpha blend calculator.

How it works

Opacity a is your slider value divided by 100, multiplied by any alpha the colour already has. The 8-digit HEX adds round(a × 255) as two hex digits after the colour.

The “Looks like” colour uses source-over compositing, the normal way browsers paint one layer on another. For each channel:

result = a × colour + (1 − a) × background

The background is treated as solid.

Worked examples

These are the tool’s own outputs.

Blue at half strength. #3b82f6 at 50% gives rgba(59, 130, 246, 0.5), #3b82f680 and rgb(59 130 246 / 50%). On white it looks like #9dc1fb.

A light black overlay. #000000 at 10% is #0000001a. On white it looks like #e6e6e6, a light grey.

Blue on a dark theme. #3b82f6 at 20% on #0f172a looks like #182c53, a deep navy. The same tint on white would be a pale blue, which is why one transparent token can serve light and dark themes differently.

Limits and tips

• The solid result is right only for a flat background. Over a photo or gradient, every pixel gives a different result.
• Check text contrast on the solid value with the contrast checker; a translucent text colour often fails where the solid one passed.
• Alpha is stored in 8 bits, so 0.5 becomes 128/255 (about 0.502) in HEX form.
• Everything runs in your browser.