Mezcla de colores en CSS puro | Programar Plus

Rojo + Azul = Morado… ¿verdad?

¿Hay alguna forma de expresar eso en CSS? Bueno, no fácilmente. Hay un borrador de propuesta para un color-mix función y cierto grado de interés de Chrome, pero no parece estar a la vuelta de la esquina. Sería bueno tener una mezcla de colores CSS nativa, ya que daría a los diseñadores una mayor flexibilidad al trabajar con colores. Un ejemplo es crear variantes tintadas de un solo color base para formar una paleta de diseño.

Pero esto es CSS-Tricks, así que hagamos algunos trucos CSS.

Tenemos una calc() función en CSS para manipular números. Pero tenemos muy pocas formas de operar directamente con colores, aunque algunos formatos de color (p. Ej. hsl() y rgb()) se basan en valores numéricos.

Mezclar colores con animación

Podemos pasar de un color a otro en CSS. Esto funciona:

div {
  background: blue;
  transition: 0.2s;
}
div:hover {
  background: red; 
}

Y aquí está eso con animaciones:

div {
  background: blue;
  transition: 0.2s;
}
div:hover {
  animation: change-color 0.2s forwards;
}


@keyframes change-color {
  to {
    background: red;
  }
}

Esta es una animación de fotogramas clave que se ejecuta infinitamente, donde puede ver el color moviéndose entre rojo y azul. Abra la consola y haga clic en la página; puede ver que incluso JavaScript puede indicarle el color actual en cualquier punto exacto de la animación.

Entonces, ¿qué pasa si pausamos la animación en algún lugar en el medio? ¡La mezcla de colores funciona! Aquí hay una animación en pausa que es 0.5s a través de su 1s duración, exactamente a la mitad:

Lo logramos estableciendo un animation-delay de -0.5s. ¿Y qué color está a medio camino entre el rojo y el azul? Púrpura. Podemos ajustar eso animation-delay para especificar el porcentaje de dos colores.

Esto funciona para los navegadores principales de Chromium y Firefox. En Safari, debe cambiar el nombre de la animación para obligar al navegador a recalcular el progreso de la animación.

Este truco también se puede utilizar para agregar un canal alfa a un color, que suele ser útil para tematizar.

Obtener el color mezclado en una propiedad personalizada de CSS

Este es un buen truco hasta ahora, pero no es muy práctico aplicar una animación en cualquier elemento en el que necesite usar un color mixto, y luego tener que establecer todas las propiedades que desea cambiar dentro del @keyframes.

Podemos mejorar esto un poco si agregamos un par de características CSS más:

  1. Utilizar una @property propiedad personalizada de CSS tipeada, por lo que se puede crear como un color adecuado y, por lo tanto, animar como un color.
  2. Usa un descaro @function para llamar fácilmente fotogramas clave en un punto en particular.

Ahora todavía necesitamos llamar a la animación, pero el resultado es que se modifica una propiedad personalizada que podemos usar en cualquier otra propiedad.