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 aportar vitalidad a tus diseños.

Rachel Andrew

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) con colores de gamuts HD. Esta compatibilidad incluye nuevas funciones para aprovechar mejor el color en la Web.

Cómo acceder a los espacios de color desde CSS

Ya tenemos una serie de funciones que nos permiten acceder a colores dentro del gamut de 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);
}

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 mediante lch(), lab(), oklch() y oklab().

Navegadores compatibles

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

Origen

Puedes obtener información sobre todos estos espacios de color diferentes 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 combinar un color con otro, en cualquiera de los espacios de color. En el siguiente CSS, el 25% del 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 traer colores HD brillante a la Web. Para comenzar, crea algunos gradientes atractivos con el generador de gradientes HD en gradient.style.