Todos los motores principales ahora admiten las funciones y los espacios de color nuevos de CSS. Descubre cómo pueden aportar vitalidad a tus diseños.
CSS ahora admite espacios de color que nos permiten acceder a colores fuera del gamut de sRGB. Esto significa que puedes admitir pantallas HD (alta definición) usando colores de gamas de HD. Esta compatibilidad incluye nuevas funciones para aprovechar mejor el color en la Web.
Accede a los espacios de color desde CSS
Ya tenemos una serie de funciones que nos permiten acceder a colores dentro del gamut sRGB: rgb(), hsl() y hwb(). Ahora compatible con los navegadores es la función color(), una forma normalizada de acceder a colores dentro de cualquier espacio de color RGB. Esto incluye sRGB, Display P3 y Rec2020. Puedes ver algunos ejemplos en el siguiente CSS:
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
También se admiten varias funciones que permiten el acceso a espacios de color distintos de sRGB a través de lch(), lab(), oklch() y oklab().
Puedes obtener más información sobre todos estos espacios de color diferentes en la guía de colores CSS en alta definición.
La función color-mix()
Además de estos nuevos espacios de color, todos los motores ahora admiten la función color-mix(). Esta función permite mezclar un color con otro en cualquiera de los espacios de color. En el siguiente CSS, el 25% del azul se mezcla con blanco, en el espacio de color srgb.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
Más información sobre color-mix()
Estas nuevas funciones y espacios de color prometen colores HD vibrantes a la Web. Para inspirarte, empieza por crear algunos gradientes atractivos con el generador de gradientes de HD en gradient.style.