Tabla de opacidad hex + selector de color RGBA (#RRGGBBAA) | We.Inc
Añade transparencia a cualquier color hex. Elige una opacidad, copia el valor hex de 8 dígitos, rgba, hsla o Android, y míralo sobre fondos claros, oscuros y de cuadros. Tabla alfa completa del 0 al 100%.
Para hacer transparente un color hex, añade dos dígitos hex más para el canal alfa: #RRGGBBAA. El par es la opacidad multiplicada por 255, escrita en hex, así que 50% es 80, 75% es BF y 25% es 40. Elige un color y una opacidad abajo para obtener el hex de 8 dígitos y los valores rgba y hsla equivalentes.
Valores de opacidad más usados
Opacidad
Par alfa
Ejemplo sobre #4F98FB
BF
Elige un color, arrastra el control de opacidad y copia el formato que necesite tu código. La vista previa muestra el color sobre blanco, negro y un fondo de cuadros, junto con el color sólido resultante en cada caso.
Escribe o elige un color base. Funcionan los hex de tres, seis y ocho dígitos; si ya trae un par alfa, este fija el control deslizante.
Arrastra el control o escribe un porcentaje del 0 al 100.
Copia el hex de 8 dígitos, rgba(), el rgb() moderno con barra, hsla() o la forma #AARRGGBB de Android.
Revisa el color mezclado sobre blanco y sobre negro si necesitas un color sólido de respaldo o quieres comprobar el contraste del texto.
Los pares alfa se redondean, así que un porcentaje no siempre vuelve exacto. 80 en hex es 128 de 255, es decir 50.2%, suficiente para cualquier pantalla.
Los recursos de color de Android ponen el alfa al principio (#AARRGGBB), al revés que CSS. Intercambiarlos es una causa habitual de que un color se vea mal en una app.
Para el texto, comprueba el contraste con el color mezclado, no con el transparente. Un negro al 60% sobre blanco se lee muy distinto que un negro al 60% sobre una foto.
Usa la propiedad opacity solo cuando todo el elemento, hijos incluidos, deba desvanecerse. Para un fondo translúcido con texto sólido, pon el alfa en el color de fondo.
Preguntas frecuentes
¿Todos los navegadores admiten colores hex de 8 dígitos?
Sí. Las formas #RRGGBBAA y #RGBA vienen de CSS Color Level 4 y funcionan en todas las versiones actuales de Chrome, Edge, Firefox y Safari. Los navegadores muy antiguos las ignoran, así que añade un respaldo rgba() solo si todavía los soportas.
¿Cómo convierto la opacidad a hex?
Multiplica la opacidad (de 0 a 1) por 255, redondea a un número entero y escríbelo como dos dígitos hex. Para 30%: 0.3 por 255 da 76.5, que se redondea a 77, que en hex es 4D. La tabla completa de esta página recoge cada paso del 5%.
¿#RRGGBBAA es lo mismo que rgba()?
Describen el mismo color. rgba(79, 152, 251, 0.5) y #4F98FB80 se ven idénticos, salvo el mínimo redondeo del alfa en hex. Usa el que ya utilice tu código.
¿Y el hex de 4 dígitos?
Cómo leer el par alfa
Un par hex cuenta de 00 a FF, es decir, de 0 a 255. El par alfa usa la misma escala: 00 es totalmente transparente y FF totalmente opaco. Por eso los valores habituales parecen raros al principio: la mitad de 255 es 127.5, así que 50% se redondea a 128, que es 80 en hex.
Los diseñadores suelen exportar colores desde un archivo de diseño con un número de opacidad aparte. Convertirlo en un único valor de 8 dígitos facilita usarlo en un design token o en una configuración de Tailwind.
Colores transparentes en Tailwind
Tailwind añade opacidad con una barra después del nombre del color, por ejemplo bg-sky-500/50, y funciona con cualquier color del tema. Para un color personalizado, un valor arbitrario como bg-[#4F98FB80] acepta directamente el hex de 8 dígitos.
Internamente, Tailwind 4 mezcla el color con transparente mediante color-mix(), y las versiones anteriores usan rgb() con alfa. El resultado en pantalla es el mismo que el valor hex que te da esta herramienta.