Una tarea común en el diseño es aplicar transparencia a un color, y con técnicas más actuales, colores definidos como variable. Esto puede lograrse con pre-procesadores CSS y nativamente utilizando combinaciones de sintaxis modernas como rgba(), hsla() y otros ya soportados ampliamente. Este artículo explica cómo manejar esta necesidad técnica con ejemplos prácticos.

Definir Variables de Color en CSS⌗

Las variables CSS se declaran dentro de un selector, generalmente :root para que estén disponibles globalmente:

:root {
  --color-principal: #3498db; /* Azul claro */
}

Esta declaración permite reutilizar --color-principal en cualquier lugar del código.

La transparencia en CSS⌗

Para agregar transparencia a un color, CSS ofrece funciones como:

  • rgba(): Permite especificar colores en el formato RGB con un canal alfa para controlar la opacidad:
color: rgba(52, 152, 219, 0.5); /* color azul con 50% de opacidad */
  • hsla(): Similar a rgba(), pero usa el modelo de color HSL (Hue, Saturation, Lightness):
color: hsla(204, 70%, 53%, 0.5); /* azul con 50% de opacidad */

Como notarás, para definir colores utilizando rgba() y hsla() necesitas convertir la variable en hexacromía, lo que implica un nuevo impedimento. Pero encontré una propiedad que soluciona mi problema a la perfección:

La función color-mix()⌗

A partir de CSS Color Module Level 5, color-mix() permite mezclar colores en hexacromía declarados como variables directamente con transparencia:

:root {
  --color-principal: #3498db;
}

.elemento {
  background-color: color-mix(in srgb, var(--color-principal) 50%, transparent); /* variable CSS con 50% de opacidad */
}
  • Soporte de navegadores de CSS color-mix en Can I Use