Convertidor de HEX a RGBA
Añade transparencia a cualquier color HEX. Escribe un código HEX, ajusta la opacidad y copia un valor rgba() o una regla CSS lista para usar. Los códigos HEX de 4 y 8 dígitos conservan su propio canal alfa.
Última actualización:
3, 4, 6 u 8 dígitos, con o sin #.
Convertir una lista de códigos HEX
Cómo usar Convertidor de HEX a RGBA
- Introduce un código HEX como #2F6B4F, 2f6b4f o #fff, o elige un color con el botón de color.
- Ajusta la opacidad con el control deslizante, la casilla numérica o un ajuste rápido como 50%.
- Revisa la vista previa sobre fondo de cuadros, blanco y oscuro.
- Copia el valor rgba(), la sintaxis CSS moderna, el HEX de 8 dígitos o una regla CSS completa.
- ¿Tienes muchos colores? Abre “Convertir una lista de códigos HEX” y pégalos todos.
Fórmula de HEX a RGBA
Un color HEX son tres (o cuatro) bytes escritos en base 16. Para convertirlo:
- Quita el # y expande las formas cortas duplicando cada dígito:
#3A7→#33AA77,#3A78→#33AA7788. - Convierte cada par a decimal: primer dígito × 16 + segundo dígito, donde A = 10 … F = 15.
6B= 6 × 16 + 11 = 107. - Si hay un cuarto par, alfa = ese valor ÷ 255. Si no, usa la opacidad que elijas (de 0 a 1).
- Escribe
rgba(R, G, B, alfa).
Porcentaje de opacidad a alfa HEX
Usa esta tabla para escribir la transparencia directamente en un código HEX de 8 dígitos (#RRGGBB + par alfa). El par alfa es round(porcentaje × 255 ÷ 100) en hexadecimal.
| Opacidad | Alfa de rgba() | Alfa HEX | Decimal (0–255) |
|---|---|---|---|
| 100% | 1 | FF | 255 |
| 95% | 0.95 | F2 | 242 |
| 90% | 0.9 | E6 | 230 |
| 85% | 0.85 | D9 | 217 |
| 80% | 0.8 | CC | 204 |
| 75% | 0.75 | BF | 191 |
| 70% | 0.7 | B3 | 179 |
| 65% | 0.65 | A6 | 166 |
| 60% | 0.6 | 99 | 153 |
| 55% | 0.55 | 8C | 140 |
| 50% | 0.5 | 80 | 128 |
| 45% | 0.45 | 73 | 115 |
| 40% | 0.4 | 66 | 102 |
| 35% | 0.35 | 59 | 89 |
| 30% | 0.3 | 4D | 77 |
| 25% | 0.25 | 40 | 64 |
| 20% | 0.2 | 33 | 51 |
| 15% | 0.15 | 26 | 38 |
| 10% | 0.1 | 1A | 26 |
| 5% | 0.05 | 0D | 13 |
| 0% | 0 | 00 | 0 |
Cuándo usar colores rgba()
- Superposiciones sobre fotos: una capa oscura rgba(0, 0, 0, 0.5) hace que el texto blanco sea legible sobre cualquier imagen.
- Sombras y bordes: los colores semitransparentes se mezclan con cualquier fondo. Prueba el generador de box-shadow CSS.
- Estados hover y seleccionado: un tono al 10–15% del color de tu marca funciona tanto sobre fondos claros como de color.
- ¿Necesitas un HEX sólido para una herramienta que no admite transparencia? Aplánalo con RGBA a HEX.
Preguntas frecuentes
¿Cómo convierto HEX a RGBA?
Divide el código HEX en tres pares y convierte cada uno de base 16 a decimal: #2F6B4F se convierte en 2F = 47, 6B = 107, 4F = 79. Añade la opacidad como un número de 0 a 1 para obtener rgba(47, 107, 79, 0.5). Un código de 3 dígitos como #FFF se expande primero duplicando cada dígito (#FFFFFF).
¿Qué significa un código HEX de 8 dígitos?
Los dos últimos dígitos son el canal alfa (opacidad), de 00 (totalmente transparente) a FF (totalmente opaco). Por ejemplo, #2F6B4F80 tiene alfa 0x80 = 128, y 128 ÷ 255 ≈ 0.502, así que equivale a rgba(47, 107, 79, 0.502).
¿Puedo usar HEX de 8 dígitos en CSS en lugar de rgba()?
Sí. #RRGGBBAA y la forma corta #RGBA forman parte de CSS Color Level 4 y funcionan en todos los navegadores actuales. rgba() sigue siendo útil para herramientas antiguas, plantillas de correo electrónico y cuando quieres ver la opacidad de un vistazo.
¿Qué diferencia hay entre rgba() y rgb() con barra?
Son equivalentes. El CSS moderno permite escribir rgb(47 107 79 / 50%) con espacios y el alfa después de una barra; el antiguo rgba(47, 107, 79, 0.5) usa comas. Ambos son compatibles con todos los navegadores modernos.
¿Qué valores de opacidad son habituales?
Los diseñadores suelen usar 10–20% para fondos sutiles y estados hover, 50% para superposiciones y 70–90% para texto sobre imágenes. Comprueba que el texto siga siendo legible con un verificador de contraste.
¿Es esta opacidad lo mismo que la propiedad opacity de CSS?
No. rgba() solo hace transparente ese color, por ejemplo un fondo, mientras que la propiedad opacity atenúa todo el elemento, incluidos su texto y sus hijos.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.