Cuando estamos trabajando con colores, lo hacemos en un espacio de color determinado. El espacio de color más tradicional en web es sRGB. Este espacio de color fue creado por Microsoft y HP para poder tener un ámbito en el que están definidos todos los colores que podemos utilizar. Por un lado tenemos los modelos de colores y por otro los espacios de color.

• Un modelo de color es una forma de describir un color. Por ejemplo, RGB (mediante rojo, verde y azul) o CMYK (mediante cyan, magenta, amarillo y negro).

• Un espacio de color es un conjunto de colores para mostrar o reproducir en un medio. Por ejemplo, sRGB es un conjunto de colores con diferentes valores RGB.

Espacios de color

En CSS, podemos trabajar con diferentes espacios de color predefinidos. A continuación muestro la lista completa de espacios de color soportados en web:

Cuando trabajamos en un espacio de color predefinido, es muy frecuente que al ver una obra en otro monitor o medio que utilice otro espacio de color, los colores no sean exactamente iguales y se vean de forma diferente.

La función color()

Si necesitamos indicar un color mediante un espacio de color determinado, podemos utilizar la función color() de CSS, mediante la cuál le pasamos como primer parámetro el espacio de color, y luego, separado con espacios los valores de cada uno de los componentes. Opcionalmente, se le puede indicar al final un / seguido de un valor de canal alpha.

Observa el siguiente fragmento de código:

.item-1 { background: color(srgb 50% 25% 75%); }
.item-2 { background: color(srgb-linear 50% 25% 75%); }
.item-3 { background: color(display-p3 50% 25% 75%); }
.item-4 { background: color(a98-rgb 50% 25% 75%); }
.item-5 { background: color(prophoto-rgb 50% 25% 75%); }
/* ... */

A todos ellos se indica los valores 50% 25% 75%, pero cada uno en un espacio de color diferente. Observa más abajo los colores resultantes en tu navegador:

La función color() tiene buen soporte en navegadores actuales:

La función color-mix()

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

El espacio de color puede ser srgb, srgb-linear, lab o oklab, xyz, xyz-d50, xyz-d65, hsl, hwb o lch o oklch.

.item-1 {
  width: 100px;
  height: 50px;
  background: color-mix(in srgb, red, blue);
}

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

Definir cantidad de colores

Podemos indicar a la derecha de cada color el porcentaje de cantidad de color que queremos usar. Por ejemplo, observa este ejemplo:

.item-1 {
  width: 100px;
  height: 50px;
  background: color-mix(in xyz-d50, red 25%, blue 75%);
}

Hemos definido varias cosas:

• Vamos a mezclar red y blue en el espacio de colores xyz-d50.
• La cantidad de rojo red será de un 25%.
• La cantidad de azul blue será de un 75%.

Los colores pueden ser definidos con hexadecimal u otros esquemas. Las cantidades siempre deben sumar 100%, si se omite el porcentaje de uno de los dos, se completa 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:

.item-1 {
  width: 100px;
  height: 50px;
  background: color-mix(in oklch longer hue, red 40%, blue 60%);
}

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: