Alfa describe opacidad, no otro color
Un canal alfa no crea una versión pálida independiente de un color. Controla cuánto contribuye el primer plano al componerlo sobre un fondo. El resultado visible depende de ambos colores y de las capas intermedias. El mismo rgb(0 0 0 / 50%) aparece gris medio sobre blanco, más oscuro sobre gris y puede desaparecer sobre negro. Alfa suele escribirse como número de 0 a 1 o porcentaje de 0% a 100%. Representa opacidad: un valor mayor aporta más primer plano, no más transparencia.
La palabra clave transparent representa un color completamente transparente. Es útil en gradientes y transiciones, pero un extremo transparente conserva componentes de color que pueden intervenir durante la interpolación según el espacio y sus reglas. No conviene suponer que toda transición hacia transparent equivale a reducir únicamente el alfa del otro extremo. Cuando la interpolación exacta importa, declara los dos colores de extremo explícitamente en la sintaxis elegida y prueba el gradiente. Para superposiciones ordinarias, un color con alfa tras la barra suele comunicar mejor la intención.
En HEX de ocho dígitos alfa va al final
HEX de ocho dígitos sigue el orden #RRGGBBAA: el byte alfa aparece después de rojo, verde y azul. #4F46E580 significa rojo 4F, verde 46, azul E5 y alfa 80; no es una secuencia ARGB. La abreviatura #RGBA expande cada dígito repitiéndolo, igual que #RGB. Como un byte alfa solo ofrece 256 valores discretos, 80 hexadecimal equivale a 128/255, aproximadamente 50,2%, no a 50% matemáticamente exacto. Cuando interesa mostrar un porcentaje decimal claro, la notación funcional evita tener que interpretar el byte.
.alpha-examples {
--overlay-a: #4f46e580;
--overlay-b: rgb(79 70 229 / 50%);
--overlay-c: hsl(243.4 75.4% 58.6% / 0.5);
}La notación funcional hace explícito alfa
La sintaxis moderna de rgb(), hsl(), hwb(), lab() y oklch() coloca alfa después de una barra. Puede ser un número o porcentaje, de modo que rgb(79 70 229 / 50%) resulta fácil de revisar. Los nombres antiguos rgba() y hsla() siguen como alias compatibles, pero rgb() y hsl() modernos ya aceptan alfa. Alfa no amplía la gama ni cambia las coordenadas de los demás canales. Conserva unidades válidas para la función elegida y no mezcles separadores con comas del formato antiguo con la gramática moderna de espacios y barra.
- 0 y 0% son transparentes; 1 y 100% son completamente opacos.
- En #RRGGBBAA, AA es siempre la pareja final.
- El valor de ocho bits 80 representa 128/255, cerca de 50,2% de opacidad.
- El alfa después de una barra pertenece al color y no cambia otras pinturas.
Alfa de color y opacity abarcan cosas distintas
El alfa incluido en un color afecta solo a esa pintura: un fondo translúcido no desvanece automáticamente texto e hijos. La propiedad opacity actúa sobre todo el elemento después de renderizar su contenido como grupo, por lo que descendientes, bordes, texto, sombras y fondo pierden opacidad juntos. Por eso opacity suele ser inadecuada para crear un panel translúcido detrás de texto completamente opaco. Un pseudoelemento o capa separada permite controlar fondo y contenido de forma independiente. La interacción también es independiente: opacity: 0 no elimina eventos del puntero ni foco por sí sola.
| Forma | Alcance | Detalle importante |
|---|---|---|
| #RRGGBBAA | Un color | Alfa es el último byte |
| rgb(... / a) | Un color | Número o porcentaje legible |
| transparent | Un color | Extremo totalmente transparente |
| opacity | Grupo renderizado | Incluye descendientes y pinturas |
La composición cambia los canales visibles
La composición calcula la salida a partir del primer plano, el fondo y alfa. Varias capas translúcidas se acumulan; repetir el mismo token alfa en superposiciones anidadas no genera un color final predecible sin conocer la pila. Filtros, modos de mezcla, imágenes, gradientes y efectos aplicados al fondo añaden dependencias. Las herramientas de desarrollo pueden mostrar un color resuelto, pero la accesibilidad se refiere a los píxeles del estado real. Incluye los fondos de los estados de sobrevuelo, foco, deshabilitado, seleccionado y los velos modales. Una muestra del sistema de diseño presentada solo sobre blanco no demuestra el resultado en todos los componentes.
.notice {
background: rgb(255 255 255 / 92%);
border-color: rgb(15 23 42 / 18%);
}
.disabled {
opacity: 0.55;
}La accesibilidad necesita el fondo final
El contraste WCAG se evalúa entre colores finales de primer plano y fondo. Un texto translúcido no tiene una única relación de contraste independiente de su fondo. Una superposición también puede reducir o aumentar el contraste del contenido inferior. Para texto sobre imágenes variables, utiliza una superficie opaca controlada o suficientemente estable, o calcula el peor fondo admitido. No declares conformidad con coordenadas RGB sin componer. Los umbrales para texto grande y normal dependen del criterio y del contenido, pero siempre requieren luminancias relativas de los colores ya resueltos.
- Comprueba todos los fondos y estados admitidos.
- Usa alfa de color para una pintura y opacity solo para desvanecer deliberadamente un grupo.
- Mide el contraste tras la composición, no solo desde canales fuente.
- Mantén explícita la interacción aunque el elemento sea visualmente transparente.
Un flujo de revisión fiable
Revisa código alfa comprobando sintaxis, alcance, estado y fallback. Confirma el orden #RRGGBBAA, que el byte no provenga de una API ARGB y que un porcentaje no se haya entendido como transparencia. Decide si debe desvanecerse una pintura o todo el grupo. Inspecciona el resultado sobre cada fondo permitido y con forced-colors o preferencias de usuario relevantes. Nombra tokens por finalidad, como overlay o border-subtle, en vez de codificar un fondo supuesto en su nombre. Cada cambio de la paleta de fondo obliga a repetir composición y contraste.
Fuentes primarias
Las afirmaciones de este artículo se comprueban con estas especificaciones publicadas.