WebToolsPlanet
Converter Tools

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

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

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

1

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

2

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

3

The CSS rgba() string appears instantly

4

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.

Related Tools

Part of a Collection