CSS color-mix()

Adam Argyle

La función color-mix() de CSS te permite mezclar colores en cualquiera de los espacios de color compatibles directamente desde tu CSS.

Antes de color-mix(), para oscurecer, aclarar o desaturar un color, los desarrolladores usaban preprocesadores de CSS o calc() en los canales de color.

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass hizo un gran trabajo para mantenerse al tanto de la especificación de CSS de color. Sin embargo, no había una forma real de mezclar colores en CSS. Para acercarte, debes hacer cálculos de valores de color parciales. Este es un ejemplo reducido de cómo CSS puede simular la mezcla hoy en día:

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() brinda la capacidad de mezclar colores a CSS. Los desarrolladores pueden elegir en qué espacio de color se mezclan y qué tan dominante debe ser cada color en la mezcla.

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

Eso es lo que queremos. Flexibilidad, potencia y APIs con todas las funciones. ámalo

Mezcla de colores en CSS

CSS existe en un mundo de múltiples espacios de color y gamas de colores, por lo que no es opcional especificar el espacio de color para la mezcla. Además, los diferentes espacios de color pueden cambiar drásticamente los resultados de una mezcla, por lo que conocer los efectos de un espacio de color te ayudará a obtener los resultados que necesitas.

Para obtener una introducción interactiva, prueba esta herramienta color-mix(): - Explora los efectos de cada espacio de color. - Explora los efectos de la interpolación de tonos cuando se mezcla en un espacio de color cilíndrico (lch, oklch, hsl y hwb).- Para cambiar los colores que se mezclan, haz clic en cualquiera de los dos cuadros de color superiores. - Usa el control deslizante para cambiar la proporción de mezcla. - El código CSS color-mix() generado está disponible en la parte inferior.

Mezcla en los distintos espacios de color

El espacio de color predeterminado para la mezcla (y los gradientes) es oklab. Proporciona resultados coherentes. También puedes especificar espacios de color alternativos para adaptar la mezcla a tus necesidades.

Tomemos black y white como ejemplo. El espacio de color en el que se mezclan no hará una gran diferencia, ¿verdad? Todo lo contrario.

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);

¡Sí tiene un gran efecto!

Tomemos blue y white como otro ejemplo. Elegí esto específicamente porque es un caso en el que la forma de un espacio de color puede afectar los resultados. En este caso, la mayoría de los espacios de color se vuelven morados mientras viajan de blanco a azul. También muestra cómo oklab es un espacio de color tan confiable para la mezcla, ya que es el más cercano a las expectativas de la mayoría de las personas de mezclar blanco y azul (sin morado).

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

Aprender los efectos de un espacio de color con color-mix() es un gran conocimiento para crear gradientes también. La sintaxis de Color 4 también permite que los gradientes especifiquen el espacio de color, en el que un gradiente muestra la mezcla en un área de espacio.

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

Si te preguntas qué espacio de color es "el mejor", no hay ninguno. Por eso hay tantas opciones. Tampoco se inventarían nuevos espacios de color (consulta oklch y oklab) si uno fuera "el mejor". Cada espacio de color puede tener un momento único para brillar y ser la elección correcta.

Por ejemplo, si deseas un resultado de mezcla vibrante, usa hsl o hwb. En la siguiente demostración, se mezclan dos colores vibrantes (magenta y lima), y hsl y hwb producen un resultado vibrante, mientras que srgb y oklab producen colores no saturados.

Si deseas coherencia y sutileza, usa oklab. En la siguiente demostración, que mezcla azul y negro, hsl y hwb producen colores demasiado vibrantes y con cambio de tono, mientras que srgb y oklab producen un azul más oscuro.

Pasa cinco minutos con el color-mix() playground, probando diferentes colores y espacios, y comenzarás a sentir las ventajas de cada espacio. También espera más orientación sobre los espacios de color a medida que todos nos adaptemos a su potencial en nuestras interfaces de usuario.

Ajusta el método de interpolación de tonos

Si elegiste mezclar en un espacio de color cilíndrico, básicamente cualquier espacio de color con un canal de tono h que acepte un ángulo, puedes especificar si la interpolación va shorter, longer, decreasing, y increasing. Esto se explica bien en esta Guía de color HD si deseas obtener más información.

Este es el mismo ejemplo de mezcla de azul a blanco, pero esta vez, solo está en los espacios cilíndricos con diferentes métodos de interpolación de tonos.

Este es otro Codepen que hice para ayudar a visualizar la interpolación de tonos, pero específicamente para gradientes. Creo que esto te ayudará a comprender cómo cada espacio de color produce su resultado de mezcla cuando se especifica la interpolación de tonos, pero dale un estudio.

Mezcla con diferentes sintaxis de color

Hasta ahora, mezclamos principalmente colores con nombre de CSS, como blue y white. La mezcla de colores CSS está lista para mezclar colores de dos espacios de color diferentes. Este es otro motivo por el que es clave especificar el espacio de color para la mezcla, ya que establece el espacio común para cuando los dos colores no están en el mismo espacio.

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

En el ejemplo anterior, hsl y display-p3 se convertirán a oklch y, luego, se mezclarán. Es muy genial y flexible.

Ajusta las proporciones de mezcla

No es muy probable que cada vez que mezcles quieras partes iguales de cada color, como se mostró en la mayoría de los ejemplos hasta ahora. Buenas noticias, hay una sintaxis para expresar cuánto de cada color se debe ver en la mezcla resultante.

Para comenzar con este tema, aquí tienes una muestra de mezclas que son todas equivalentes (y de la especificación):

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

Considero que estos ejemplos ilustran bien los casos extremos. El primer conjunto de ejemplos muestra que no se requiere el 50%, pero se puede especificar de forma opcional. En el último ejemplo, se muestra un caso interesante en el que las proporciones superan el 100% cuando se suman, se ajustan por igual al 100% total.

Observa también que, si solo un color especifica una proporción, se supone que el otro es el resto hasta el 100%. Aquí tienes algunos ejemplos más para ilustrar este comportamiento.

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

Estos ejemplos ilustran dos reglas: 1. Cuando las proporciones superan el 100%, se ajustan y se distribuyen por igual. 1. Cuando solo se proporciona una proporción, el otro color se establece en 100 menos esa proporción.

La última regla es un poco menos obvia. ¿Qué sucede si se proporcionan porcentajes para ambos colores y no suman el 100%?

color-mix(in lch, purple 20%, plum 20%)

Esta combinación de un color-mix() da como resultado transparencia, 40% de transparencia. Cuando las proporciones no suman el 100%, la mezcla resultante no será opaca. Ninguno de los colores se mezclará por completo.

Anidación de color-mix()

Al igual que todo CSS, la anidación se maneja bien y como se espera; las funciones internas se resolverán primero y devolverán sus valores al contexto superior.

color-mix(in lch, purple 40%, color-mix(plum, white))

No dudes en anidar todo lo que necesites para obtener el resultado que buscas.

Compila un esquema de colores claros y oscuros

Compilaremos esquemas de colores con color-mix().

Un esquema de colores básico

En el siguiente CSS, se crean un tema claro y uno oscuro basados en un color hexadecimal de la marca. El tema claro crea dos colores de texto azul oscuro y un color de superficie de fondo blanco muy claro. Luego, en una consulta de medios de preferencia oscura, se asignan nuevos colores a las propiedades personalizadas para que el fondo sea oscuro y los colores de texto sean claros.

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

Todo esto se logra mezclando blanco o negro en un color de marca.

Esquema de colores intermedio

Esto se puede llevar un paso más allá agregando más temas claros y oscuros. En la siguiente demostración, los cambios en el grupo de botones de selección actualizan un atributo en la etiqueta HTML [color-scheme="auto"] que luego permite que los selectores apliquen un tema de color de forma condicional.

Esta demostración intermedia también muestra una técnica de temas de color en la que todos los colores del tema se enumeran en :root. Esto hace que sea fácil verlos todos juntos y ajustarlos si es necesario. Más adelante en la hoja de estilo, puedes usar las variables tal como están definidas. Esto evita tener que buscar en la hoja de estilo las manipulaciones de color, ya que todas están contenidas en el bloque :root inicial.

Casos de uso más interesantes

Ana Tudor tiene una excelente demostración con algunos casos de uso para estudiar:

Depura color-mix() con DevTools

Las Herramientas para desarrolladores de Chrome tienen una excelente compatibilidad con color-mix(). Reconoce y destaca la sintaxis, crea una vista previa de la mezcla junto al estilo en el panel Estilos y permite elegir colores alternativos.

Se verá de la siguiente manera en las Herramientas para desarrolladores:

¡Feliz mezcla a todos!