Cómo 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.
También se busca como: hex to rgb, rgba, opacity, transparency, alpha, hex8, rgba to hex.
Herramientas que combinan con: 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.
- Generador de colores de Tailwind — Pega un color de marca y obtén una escala de tonos equilibrada de 11 pasos (del 50 al 950) integrada en OKLCH, con sugerencias de contraste y opciones de exportación para Tailwind v3, v4, CSS y SCSS.
Preguntas frecuentes
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.