Como usar: HEX to RGBA Converter
- Type or paste a HEX code such as
#ff6347— or pick a color 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 color 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 color 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 colors change contrast depending on what is behind them — check the result with the Contrast Checker.
Também pesquisado como: hex to rgb, rgba, opacity, transparency, alpha, hex8, rgba to hex.
Ferramentas que combinam com: HEX to RGBA Converter
- Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- OKLCH Color Converter — Explore the perceptually uniform OKLCH color space with live sliders, see whether a color fits in sRGB, and copy matching HEX, RGB and HSL fallbacks.
- Color Mixer — Pick two colors and a number of steps to get evenly blended transition colors — perfect for gradients, borders, charts and hover states.
- Gerador de cores do Tailwind — Cole uma cor da marca e obtenha uma escala de tons equilibrada de 11 etapas (50 a 950) integrada ao OKLCH — com dicas de contraste e exportações para Tailwind v3, v4, CSS e SCSS.
Perguntas frequentes
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.