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.
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.
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:
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.
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:
red
y blue
en el espacio de colores xyz-d50
.red
será de un 25%.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.
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:
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