Convertir color RGBA a hexadecimal
Convierte valores RGBA (con canal alfa) a código hexadecimal de 8 dígitos con vista previa del color.
Tus datos no se envían a ningún servidor.
El conversor de RGBA a hexadecimal convierte un color con transparencia en su
código de 8 dígitos, #RRGGBBAA. Introduces los tres canales de color y el alfa
de 0 a 1, y copias un único código que lleva el color y la opacidad juntos.
De la opacidad a los dos últimos dígitos
El alfa se escala de 0–1 a 0–255 y se escribe en hexadecimal:
| Opacidad | Alfa | Dígitos hex |
|---|---|---|
| Opaco | 1 | FF |
| 80 % | 0,8 | CC |
| 50 % | 0,5 | 80 |
| 20 % | 0,2 | 33 |
| Invisible | 0 | 00 |
Así, rgba(59, 130, 246, 0.5) se convierte en #3B82F680. Si necesitas el
camino contrario, con un deslizador para elegir la opacidad, está el conversor de
hex a RGBA.
Cuándo compensa el hex de 8 dígitos
Cuando quieres un único valor por color, por ejemplo en las variables o los
tokens de un sistema de diseño. Si el color va a vivir en
una hoja de estilos que otras personas editan, rgba() deja la opacidad a la
vista y se ajusta sin calculadora.
Cómo usar RGBA a hex
- 1
Introduce R, G y B
Escribe un número de 0 a 255 en cada canal de color. Si te pasas del rango, el valor se corrige al límite más cercano.
- 2
Añade el alfa
El canal A es la opacidad y va de 0 a 1, igual que en el rgba() de CSS: 1 es opaco, 0,5 es la mitad y 0 es invisible.
- 3
Copia el hex de 8 dígitos
El resultado es un código #RRGGBBAA con la transparencia incluida en los dos últimos dígitos, junto a una muestra del color.
Preguntas frecuentes
¿Cómo se guarda la opacidad en un código hex?
Como un cuarto par de dígitos al final. El alfa de 0 a 1 se multiplica por 255 y se escribe en base 16, así que 0,5 da 127,5, que se redondea a 128 y se escribe 80.
¿rgba() y el hex de 8 dígitos son lo mismo?
Sí. rgba(255, 0, 0, 0.5) y #FF000080 describen el mismo rojo semitransparente. El hex es más corto; rgba() se lee mejor cuando alguien tiene que ajustar la opacidad a mano.
¿Por qué un alfa de 0,3 no vuelve exacto al convertirlo de nuevo?
Porque el par hex solo tiene 256 valores posibles. 0,3 × 255 = 76,5, que se guarda como 77 (4D), y 77 / 255 son 0,302. La diferencia no se ve, pero explica por qué algunos alfas no hacen el viaje de ida y vuelta exactos.
¿Lo entienden todos los navegadores?
Todos los actuales. Firefox y Safari lo admiten desde 2016, Chrome desde 2017 y Edge desde que pasó a Chromium en 2020. Solo los navegadores muy antiguos lo ignorarían.
Mi código viene de Android y no se ve bien, ¿por qué?
Android escribe el alfa delante (#AARRGGBB) y CSS detrás (#RRGGBBAA). Si copias un color de Android, mueve los dos primeros dígitos al final.