Nuevos espacios de color y funciones CSS en todos los motores principales

Todos los motores principales ahora admiten los nuevos espacios de color y funciones de CSS. Descubre cómo pueden dar vida a tus diseños.

Rachel Andrew

CSS ahora admite espacios de color que nos permiten acceder a colores fuera de la gama sRGB. Esto significa que puedes admitir pantallas HD (alta definición) con colores de gamas HD. Esta compatibilidad incluye nuevas funciones para aprovechar mejor el color en la Web.

Accede a los espacios de color desde CSS

Ya tenemos varias funciones que nos permiten acceder a los colores dentro del gamut sRGB: rgb(), hsl() y hwb(). Ahora, los navegadores admiten la función color(), una forma normalizada de acceder a los 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);
}

Navegadores compatibles

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Origen

También se admiten varias funciones que permiten el acceso a espacios de color distintos de sRGB con lch(), lab(), oklch() y oklab().

Navegadores compatibles

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Origen

Puedes obtener información sobre todos estos diferentes espacios de color en la Guía de colores de CSS de 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% de azul se mezcla con el blanco, en el espacio de color sRGB.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Navegadores compatibles

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Origen

Obtén más información sobre color-mix().

Estas nuevas funciones y espacios de color prometen llevar colores vibrantes en HD a la Web. Para inspirarte, comienza por crear algunos degradados hermosos con el generador de degradados HD en gradient.style.