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.

Using This Tool Reliably

Input and output checks

Paste the color value in the format shown by the input label, then compare the preview against the copied result before using it in CSS, a design token, or a brand document.

Conversion logic

The browser calculates the result from the displayed channel values, rounds only for readable output, and keeps the visual preview tied to the same computed color.

Example workflow

Start with a known value such as #1E90FF, review the generated formats, copy the result, then test important text and UI states in the contrast checker when readability matters.

Common mistakes

Watch for missing # characters, RGB channels outside 0-255, percentages entered as plain numbers, alpha values copied into solid-color fields, and colors reused for text without checking contrast.

Related Color Tools

Open the next tool for this color task.