HEX to RGBA

Convert a HEX colour code to an RGBA value with a controllable alpha (opacity) channel. Outputs the CSS rgba() function string ready to paste into your stylesheet.

Last updated: May 28, 2026

HEX colour code

Alpha (opacity)1

0 (transparent)1 (opaque)

Enter a HEX code and adjust the alpha slider to get the CSS rgba() string. The preview shows the transparency against a checkerboard background.

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is HEX to RGBA?

CSS rgba() extends RGB with a fourth alpha channel that controls transparency. Values range from 0 (fully transparent) to 1 (fully opaque). This is commonly used for overlays, shadows, hover states, backgrounds with opacity, and any element where the colour must be semi-transparent.

This tool takes a HEX code — the most common way colours are stored in design tools — and converts it to rgba() with your chosen opacity.

How to Use HEX to RGBA

Enter a HEX colour code (3 or 6 digits, # optional)

Set the alpha value between 0 (transparent) and 1 (opaque)

The CSS rgba() string appears instantly

Copy it for use in your stylesheet

Common Use Cases

CSS authors adding transparency to brand colours for overlays and modal backdrops.
Developers creating hover/focus states that use the same hue as the solid colour but with reduced opacity.
Designers testing how a brand colour looks at different opacity levels before committing to a value.
Engineers building CSS custom property tokens that include semi-transparent variants of base colours.

Example Input and Output

Converting a brand blue to a semi-transparent overlay colour for a modal backdrop.

HEX + alpha

#3B82F6, alpha: 0.5

RGBA output

rgba(59, 130, 246, 0.5)

CSS custom properties

Store the rgba() value in a CSS custom property (--overlay-color: rgba(59,130,246,0.5)) for easy reuse across your stylesheet.

Browser-side only

Conversion runs locally in your browser.

Frequently Asked Questions

What is the alpha value range?

0 to 1. Use 0 for fully transparent, 1 for fully opaque, and decimal values like 0.5 for 50% opacity.

Can I use a percentage instead of a decimal?

This tool outputs the decimal form (rgba(r,g,b,0.5)). Modern CSS also accepts rgba(r,g,b,50%), but browser support for percentage alpha is slightly newer.

What if I just want rgb() without alpha?

Use the HEX to RGB tool for rgb() output without an alpha channel.

Is my data sent to a server?

No. All conversion runs in your browser.