Hex to RGBA Converter (With Alpha)

Convert any hex color to rgba() — useful when you need to add transparency to a CSS color. Supports 3/4/6/8-digit hex inputs. Live alpha slider previews the result on dark and light backgrounds.

How to use the Hex to RGBA Converter (With Alpha)

Type or pick a hex color and drag the alpha slider. The output updates the rgba() value live and previews it over light and dark backgrounds so you can see the real transparency.

From hex to rgba() with transparency

Hex colors are opaque by default, so the moment you need a semi-transparent overlay, a faint divider, or a tinted shadow you have to convert to a form that carries an alpha channel. The rgba() function does exactly that, taking red, green, and blue plus an alpha from 0 (clear) to 1 (solid).

Paste a hex value — 3, 4, 6, or 8 digit — set the alpha with the slider, and copy the resulting rgba(), previewed on both light and dark backgrounds. If you would rather work in HSL or compare other notations, the HSL–RGB converter covers that; for the modern wide-gamut alternative, see the OKLCH color picker.

Common use cases

  • Overlays — dim an image or modal backdrop with a transparent black.
  • Shadows and glows — build a soft shadow from a tinted, low-alpha color.
  • Dividers and borders — use a faint translucent line that adapts to any background.
  • Hover tints — layer a low-opacity brand color on hover.
  • 8-digit hex — convert a hex-with-alpha value into explicit rgba().

Frequently asked questions

What hex formats are supported?

Three, four, six, and eight digit hex. The four and eight digit forms already carry an alpha channel, which the tool reads in.

How does the alpha value map?

The slider runs 0 to 100 percent and outputs the matching 0 to 1 alpha in the rgba() value.

Why preview on two backgrounds?

Transparency looks different over light and dark, so both previews show how the color will actually read.

Can I convert to HSL instead?

Yes — use the HSL–RGB converter for HSL output.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: