Espacios de color

Trabajando en diferentes espacios de color


—— ——

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:

Espacio de color Descripción + info
sRGB Espacio de color estándar (rojo, verde, azul) creado por Microsoft y HP. sRGB
srgb-linear Idéntico a sRGB, pero con diferente función de transferencia de luz. Linear sRGB
display-p3 Variación de Apple de DCI-P3. Pantallas, TV o portátiles modernos lo usan. DCI-P3
a98-rgb Espacio de color desarrollado por Adobe. A98-rgb
prophoto-rgb Espacio de color desarrollado por Kodak. ProPhoto RGB
rec2020 Espacio de color basado en recomendación ITU-R BT.2020. Rec2020
xyz Espacio de color basado en el espacio CIE 1931 XYZ.
xyz-d65 Idem al anterior, pero usando D65. XYZ D65
xyz-d50 Idem al anterior, pero usando D50. XYZ D50

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.

Función Descripción
color-mix(,,) Mezcla color1 y color2 en el espacio de color indicado.
color-mix(,,) Idem, pero indicando la cantidad de color.
color-mix(hue,,) Idem, pero indicando el método de interpolación.

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:

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev