La función color-mix()

Durante mucho tiempo, CSS no ha tenido ninguna forma cómoda de mezclar colores o conseguir tonalidades diferentes de un color. Sin embargo, hoy en día tenemos a nuestra disposición mecanismos como la función color-mix() o los colores relativos, que nos hacen esta tarea mucho más cómoda, y sin tener que recurrir a Sass u otras herramientas.

La función color-mix()

La función color-mix() nos permite mezclar una cierta cantidad de dos colores determinados en un espacio de color concreto.

No te preocupes si aún no sabes lo que es un espacio de color, lo explicaremos más adelante. De momento utilizaremos el espacio de color básico srgb. Este espacio de color puede ser srgb, srgb-linear, lab o oklab, xyz, xyz-d50, xyz-d65, o polares como hsl, hwb o lch o oklch.

La función color-mix() es muy versátil y se puede utilizar de varias formas:

Veamos un pequeño ejemplo básico, utilizándola para mezclar rojo y azul:

.container {
  display: flex;
  gap: 1rem;
}

.item {
  width: 100px;
  height: 100px;
}

.item-a { background: red; }
.item-b { background: blue; }
.item-result { background: color-mix(in srgb, red, blue); }

<div class="container">
  <div class="item item-a"></div>
  <div class="item item-b"></div>
  <div class="item item-result"></div>
</div>

Al no indicar las cantidades de cada color explícitamente, estamos indicando de forma implícita que usaremos el 50% del color 1, y el 50% del color 2.

Definir cantidad de colores

Sin embargo, podemos utilizar la función color-mix() e indicar opcionalmente el porcentaje de cantidad de color que queremos usar a la derecha del color. Por ejemplo, observa este fragmento de código:

En este ejemplo interactivo hemos hecho varias cosas diferentes:

• 1️⃣ Mezclamos red y blue en el espacio de color srgb.
• 2️⃣ Los colores tienen una cantidad diferente (puedes variarla).
• 3️⃣ Los colores pueden ser definidos con hexadecimal u otros esquemas.

Ten en cuenta que las cantidades siempre deben sumar 100%. No es necesario incluir ambos porcentajes. Si se omite uno de ellos, se completará respecto al otro.

Método de interpolación

En el caso de usar espacios de colores polares (hsl, hwb o lch o oklch), se puede indicar un método de interpolación:

.container {
  display: flex;
  gap: 1rem;
}

.item {
  width: 100px;
  height: 100px;
}

.item-1 { background: color-mix(in oklch, red 40%, blue 60%); }
.item-2 { background: color-mix(in oklch longer hue, red 40%, blue 60%); }
.item-3 { background: color-mix(in oklch shorter hue, red 40%, blue 60%); }

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

Observa que tras indicar el espacio de color hemos indicado la palabra clave longer. Podemos utilizar increasing y longer o decreasing y shorter, siempre seguidas de la palabra clave hue. Esto permite especificar como los valores de la rueda de color serán interpolados.

El soporte de la función color-mix() es muy buena en navegadores actuales:

Aclarar u oscurecer colores

Un caso de uso típico y muy interesante de la función color-mix() es hacer variaciones de color más claras o oscuras que dependan de otro color utilizando variables CSS.

button {
  --color: indigo;
  --dark-color: color-mix(in srgb, var(--color), black 25%);
  --light-color: color-mix(in srgb, var(--color), white 25%);

  border: 1px solid var(--dark-color);
  border-bottom-width: 8px;
  border-top-color: var(--light-color);
  background: var(--color);
  color: #fff;
  font-family: Jost, sans-serif;
  font-size: 1.2rem;
  padding: 0.25rem 0.75rem;
  transition: transform 0.2s, border 0.2s;

  &:active {
    border-bottom-width: 1px;
    transform: translateY(7px);
    background: var(--dark-color);
  }
}

<button>¡Púlsame!</button>

Todo el color de este botón, depende directamente de la variable CSS --color, por lo que si la cambiamos, afectará al resto de colores. Esto lo hace mucho más mantenible y sencillo de cambiar.