Mixing Colors in Pure CSS

Rojo + Azul = Púrpura… ¿verdad?

¿Hay alguna forma de expresar eso en CSS? Bueno, no fácilmente. Hay un borrador de propuesta para una color-mixfunción y cierto grado de interés por parte 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 teñidas de un único color base para formar una paleta de diseño.

Pero esto son trucos de CSS, así que hagamos algunos trucos de CSS.

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

Mezclando 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 puedes 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 punto intermedio? ¡La mezcla de colores funciona! Aquí hay una animación en pausa que ha 0.5sterminado su 1sduración, es decir, 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-delaypara especificar el porcentaje de dos colores.

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

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

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 a cualquier elemento en el que necesites usar un color mezclado y luego tener que configurar todas las propiedades que deseas cambiar dentro del archivo @keyframes.

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

1. Utilice una @propertypropiedad personalizada CSS escrita , para que pueda crearse con un color adecuado y, por lo tanto, animarse como un color.
2. Utilice Sass @functionpara llamar fácilmente fotogramas clave en un punto 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.