How to use the HEX to RGBA Converter
- Type or paste a HEX code such as
#ff6347— or pick a colour with the swatch. - Drag the opacity slider (0 to 1) to set transparency. The checkerboard preview shows the result.
- Click Copy next to the format you need:
rgba(), modernrgb(), 8-digit HEX, HSLA or OKLCH. - Paste an
rgba()or 8-digit HEX value to convert in the other direction — the slider picks up its alpha.
What does a HEX to RGBA converter do?
A HEX code like #FF6347 is three pairs of hexadecimal digits — red FF (255), green 63 (99) and blue 47 (71). HEX has no room for transparency in its classic six-digit form, so when you need a semi-transparent overlay, shadow or hover state you convert it to rgba(255, 99, 71, 0.5), where the fourth value is the alpha channel from 0 (invisible) to 1 (solid).
How the conversion works
Each two-digit pair is converted from base 16 to base 10: FF = 15×16 + 15 = 255, 63 = 6×16 + 3 = 99. Three-digit shorthand such as #f63 is expanded by doubling each digit (#ff6633). The alpha you choose is appended unchanged.
Which syntax should I use?
| Syntax | Example | Notes |
|---|---|---|
| Legacy rgba() | rgba(255, 99, 71, 0.5) | Works everywhere, including very old browsers and email clients. |
| Modern rgb() | rgb(255 99 71 / 50%) | CSS Color Level 4 — space-separated, alpha after a slash. Supported by all current browsers. |
| 8-digit HEX | #ff634780 | Last pair is alpha (80 hex = 128 ≈ 50%). Handy in design tools and Webflow colour fields. |
| Channel variable | rgb(var(--color) / .5) | Store only the channels in a custom property and vary opacity per use — the pattern Tailwind uses. |
Opacity vs alpha
The CSS opacity property fades an entire element including its text and children. An RGBA background only makes the colour itself transparent, so text on top stays fully readable. For overlays on images and tinted cards, RGBA (or color-mix()) is usually what you want. Remember that semi-transparent text colours change contrast depending on what is behind them — check the result with the Contrast Checker.
Tools that pair well with the HEX to RGBA Converter
- Color Mixer — Pick two colours and a number of steps to get evenly blended transition colours — perfect for gradients, borders, charts and hover states.
- CSS Variables to Tailwind — Turn your :root colour variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4 @theme, with literal values or var() references.
- Color Name Finder — Paste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
- APCA Contrast Checker — Calculate the APCA lightness contrast (Lc) between text and background, see which uses it’s suitable for, and compare it with the classic WCAG 2 ratio.
Frequently asked questions
How do I convert HEX to RGBA manually?
#336699 at 70% becomes rgba(51, 102, 153, 0.7).What is 50% opacity in HEX?
80 in hex — so 50% black is #00000080. 25% is 40, 75% is BF.Is rgba() deprecated?
rgba() as an alias of rgb(), and both accept an alpha value. The comma syntax keeps working in every browser.Can I convert RGBA back to HEX?
rgba() value into the input. You get the opaque HEX and an 8-digit HEX that includes the alpha channel.