Cómo usar: Conversor HEX a RGBA
- Escribe o pega un código HEX como
#ff6347, o elige un color con el selector. - Arrastra el deslizador de opacidad (de 0 a 1) para definir la transparencia. La vista previa con cuadros muestra el resultado.
- Haz clic en Copiar junto al formato que necesites:
rgba(),rgb()moderno, HEX de 8 dígitos, HSLA u OKLCH. - Pega un valor
rgba()o HEX de 8 dígitos para convertirlo en sentido contrario: el deslizador tomará su valor alfa.
¿Qué hace un conversor de HEX a RGBA?
Un código HEX como #FF6347 son tres pares de dígitos hexadecimales: rojo FF (255), verde 63 (99) y azul 47 (71). En su formato clásico de seis dígitos, HEX no permite indicar transparencia, así que cuando necesitas una superposición semitransparente, una sombra o un estado hover, lo conviertes a rgba(255, 99, 71, 0.5), donde el cuarto valor es el canal alfa, de 0 (invisible) a 1 (sólido).
Cómo funciona la conversión
Cada par de dos dígitos pasa de base 16 a base 10: FF = 15×16 + 15 = 255, 63 = 6×16 + 3 = 99. La notación abreviada de tres dígitos, como #f63, se expande duplicando cada dígito (#ff6633). El alfa que elijas se añade tal cual.
¿Qué sintaxis debo usar?
| Sintaxis | Ejemplo | Notas |
|---|---|---|
| rgba() clásico | rgba(255, 99, 71, 0.5) | Funciona en todas partes, incluidos navegadores muy antiguos y clientes de correo. |
| rgb() moderno | rgb(255 99 71 / 50%) | CSS Color Level 4: valores separados por espacios y alfa tras una barra. Compatible con todos los navegadores actuales. |
| HEX de 8 dígitos | #ff634780 | El último par es el alfa (80 en hex = 128 ≈ 50%). Práctico en herramientas de diseño y en los campos de color de Webflow. |
| Variable de canales | rgb(var(--color) / .5) | Guarda solo los canales en una propiedad personalizada y varía la opacidad en cada uso. Es el patrón que usa Tailwind. |
Opacidad frente a alfa
La propiedad CSS opacity atenúa un elemento completo incluidos su texto y sus hijos. Un fondo RGBA solo hace transparente el propio color, así que el texto encima sigue siendo perfectamente legible. Para superposiciones sobre imágenes y tarjetas con tinte, RGBA (o color-mix()) suele ser lo que buscas. Ten en cuenta que los colores de texto semitransparentes cambian de contraste según lo que haya detrás: comprueba el resultado con el Comprobador de contraste.
También se busca como: convertir hex a rgba, hex a rgb, rgba, opacidad hex, transparencia css, hex8, rgba a hex.
Herramientas que combinan con: Conversor HEX a RGBA
- Conversor de colores — Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.
- Conversor OKLCH — Explora el espacio de color OKLCH, perceptualmente uniforme, con deslizadores en vivo, comprueba si un color cabe en sRGB y copia los valores HEX, RGB y HSL equivalentes como fallback.
- Mezclador de colores — Elige dos colores y un número de pasos para obtener colores de transición mezclados de forma uniforme, ideales para degradados, bordes, gráficos y estados hover.
- 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
¿Cómo convierto HEX a RGBA manualmente?
#336699 al 70% queda como rgba(51, 102, 153, 0.7).¿Cuánto es una opacidad del 50% en HEX?
80 en hexadecimal. Así, un negro al 50% es #00000080. El 25% es 40 y el 75% es BF.¿Está obsoleto rgba()?
rgba() como un alias de rgb(), y ambos aceptan un valor de alfa. La sintaxis con comas sigue funcionando en todos los navegadores.¿Puedo convertir RGBA de vuelta a HEX?
rgba() en el campo de entrada. Obtendrás el HEX opaco y un HEX de 8 dígitos que incluye el canal alfa.