HEX to RGBA Converter

Convert HEX colors to RGBA for CSS transparency, overlays, shadows, disabled states, and UI surfaces. Paste a HEX code or choose a color, then adjust the alpha value.

0 transparent 1 opaque
RGBA Result
rgba(30, 144, 255, 1)

When to Use RGBA Output

RGBA is useful when the color itself stays the same but the opacity changes. Use it for overlays, focus rings, translucent buttons, shadow colors, disabled states, and layered interface surfaces.

Tip: keep the RGB channels stable for a design token, then vary only the alpha value for different UI states.

HEX to RGBA Examples

HEX Alpha RGBA Use Case
#000000 0.50 rgba(0, 0, 0, 0.5) Modal overlay
#FFFFFF 0.80 rgba(255, 255, 255, 0.8) Frosted panel
#1E90FF80 0.50 rgba(30, 144, 255, 0.5) Selected state

How HEX Alpha Works

Standard HEX uses red, green, and blue pairs: #RRGGBB. Eight-digit HEX adds an alpha pair at the end: #RRGGBBAA. The alpha pair is converted from hexadecimal to a decimal opacity between 0 and 1.

#1E90FF80 -> red 30, green 144, blue 255, alpha 128 / 255 = 0.50

Frequently Asked Questions

Can HEX colors include transparency?

Yes. Eight-digit HEX uses the last two characters for alpha transparency, such as #00000080 for 50% black.

Should I use RGBA or 8-digit HEX in CSS?

Both work in modern browsers. RGBA is often easier to read because the alpha value is written directly as a decimal.

Why does 50% opacity become 80 in HEX?

HEX alpha uses a 0-255 byte. Half opacity is about 128, which is 80 in hexadecimal.

Related Color Tools

Open the next tool for this color task.

RGBA to HEX Converter

converter

Convert rgba() colors into 6-digit or 8-digit HEX.

Hex to RGB Converter - Free Online Tool

converter

Turn HEX colors into RGB values for CSS and design tools.

RGB to Hex Converter - Free Online Tool

converter

Convert RGB or RGBA input into a compact HEX code.

Color Contrast Checker

converter

Check text and background colors against WCAG ratios.