Convertir color hexadecimal a RGBA
Convierte cualquier color hex a RGBA y ajusta su opacidad con un control deslizante.
Tus datos no se envían a ningún servidor.
El conversor de hexadecimal a RGBA convierte cualquier color hex en un
rgba() listo para CSS y te deja elegir su opacidad con un deslizador. Funciona
con códigos de 3, 4, 6 y 8 dígitos, y te da también el hex de 8 dígitos y la
sintaxis moderna rgb(r g b / %) con la misma transparencia.
El uso más común es partir del color de tu marca y sacar una versión
semitransparente para un fondo, una sombra o una capa sobre una foto. También
sirve para lo contrario: si alguien te pasa un código #RRGGBBAA, aquí ves qué
opacidad lleva escondida en los dos últimos dígitos.
Tabla de opacidad en hex
Los dos últimos dígitos de un hex de 8 cifras indican la opacidad. Esta tabla recoge los valores más usados:
| Opacidad | Alfa en rgba() | Dígitos hex |
|---|---|---|
| 100 % | 1 | FF |
| 95 % | 0.95 | F2 |
| 90 % | 0.9 | E6 |
| 85 % | 0.85 | D9 |
| 80 % | 0.8 | CC |
| 75 % | 0.75 | BF |
| 70 % | 0.7 | B3 |
| 65 % | 0.65 | A6 |
| 60 % | 0.6 | 99 |
| 55 % | 0.55 | 8C |
| 50 % | 0.5 | 80 |
| 45 % | 0.45 | 73 |
| 40 % | 0.4 | 66 |
| 35 % | 0.35 | 59 |
| 30 % | 0.3 | 4D |
| 25 % | 0.25 | 40 |
| 20 % | 0.2 | 33 |
| 15 % | 0.15 | 26 |
| 10 % | 0.1 | 1A |
| 5 % | 0.05 | 0D |
| 0 % | 0 | 00 |
Por ejemplo, un azul #3B82F6 al 50 % de opacidad se escribe #3B82F680 en hex
de 8 dígitos y rgba(59, 130, 246, 0.5) en CSS.
Cómo usar Hex a RGBA
- 1
Escribe o pega el color hex
Introduce el código con o sin el símbolo #. Se admiten las cuatro longitudes de CSS: 3 dígitos (#F80), 4 dígitos (#F808), 6 dígitos (#FF8800) y 8 dígitos (#FF880080).
- 2
Ajusta la opacidad
Mueve el deslizador de opacidad entre 0 % y 100 %. La muestra de color se actualiza al momento con la transparencia elegida. Si tu código ya trae canal alfa, el deslizador parte de ese valor.
- 3
Copia el formato que necesites
Copia el rgba() listo para CSS, el hex de 8 dígitos con la transparencia incluida o la sintaxis moderna rgb(r g b / %). Debajo tienes cada canal desglosado.
Preguntas frecuentes
¿Cómo añado transparencia a un color hex de 6 dígitos?
Escribe el color de 6 dígitos y baja la opacidad con el deslizador. La herramienta te da el rgba() con el alfa elegido y el hex de 8 dígitos equivalente, que es el mismo color con los dos dígitos de transparencia añadidos al final.
¿Qué es un hex de 8 dígitos?
Es una extensión del hex de 6 dígitos que añade un canal de transparencia. Los seis primeros caracteres son el color (RR, GG, BB) y los dos últimos son la opacidad (AA), donde 00 es completamente transparente y FF es completamente opaco.
¿Qué son los formatos cortos #RGB y #RGBA?
Son abreviaturas en las que cada dígito se duplica. #F80 equivale a #FF8800 y #F808 equivale a #FF880088. El navegador los interpreta igual que la forma larga, y esta herramienta también.
¿Por qué el canal alfa aparece como número entre 0 y 1?
La función rgba() de CSS expresa la opacidad como un decimal entre 0 y 1. Los dos dígitos hex del alfa van de 00 a FF, es decir, de 0 a 255, así que la herramienta los divide entre 255 y redondea a dos decimales.
¿Cuál es la diferencia entre #RRGGBBAA y #AARRGGBB?
Android y algunos programas usan el formato AARRGGBB, con el alfa delante. CSS usa RRGGBBAA, con el alfa al final, y es el formato que usa este conversor. Si tu código viene de Android, mueve los dos primeros dígitos al final antes de pegarlo.
¿Lo admiten todos los navegadores?
El hex de 8 dígitos y la sintaxis rgb(r g b / %) funcionan en todos los navegadores actuales. La función rgba() funciona incluso en navegadores muy antiguos, así que es la opción más segura si no sabes dónde se verá tu CSS.