La función color() y los espacios anchos

Las pantallas dejaron de ser sRGB hace años. Cualquier portátil o móvil decente cubre Display P3, y sin embargo la inmensa mayoría del CSS del mundo sigue escrito dentro de un gamut definido en 1996 para tubos de rayos catódicos. color() es la puerta de salida, y lo interesante no es que exista sino cuánto margen te da de verdad, porque la respuesta cambia radicalmente según el tono.

La función y sus espacios

.a { background: color(display-p3 1 0.2 0.1); }
.b { background: color(srgb 1 0.2 0.1); }
.c { background: color(rec2020 0.9 0.2 0.1 / 0.5); }
.d { background: color(xyz-d65 0.4 0.2 0.05); }

El primer argumento es el nombre del espacio y los tres siguientes son sus coordenadas, siempre en el rango 0 a 1 —no 0 a 255— seguidas del alfa opcional tras una barra. Los espacios predefinidos son:

color(srgb 1 0 0) es exactamente #ff0000. La función no cambia nada por sí sola: lo que cambia es qué primarios significan esos números.

Un detalle que ahorra confusión: color() es una función de espacio con primarios, mientras que oklch() es una función de espacio perceptual sin gamut propio. oklch(70% 0.3 150) describe un color que existe independientemente de qué pantalla lo mire; color(display-p3 0 1 0.4) describe “lo que sale al encender así los tres primarios de P3”. Los dos son válidos y sirven para cosas distintas: el primero para describir un color, el segundo para exprimir un dispositivo.

Cuánto más da Display P3

Aquí es donde la intuición suele fallar. “P3 es un 50% más grande que sRGB” es una cifra de área en el diagrama de cromaticidad y no te dice nada sobre el color que ibas a usar. Medido como croma máximo disponible a claridad media, el reparto es este:

La ganancia real va del 8% al 34% según dónde mires. En los azules P3 apenas aporta, porque su primario azul es prácticamente el mismo que el de sRGB. En los cianes y verdes es donde está casi todo el margen, que es justamente la región donde sRGB era más pobre.

Eso tiene una consecuencia de diseño concreta: si tu marca es azul, P3 no te va a dar nada. Si es verde azulada, te da un tercio más de intensidad y se nota mucho. Antes de reescribir una paleta entera en P3, mira dónde caen tus tonos.

Detectar el gamut

Hay dos preguntas distintas y se responden con dos mecanismos distintos.

¿Entiende el navegador esta sintaxis? Con @supports:

@supports (color: color(display-p3 1 0 0)) {
  .marca { --base: color(display-p3 0 0.62 0.55); }
}

¿Puede la pantalla mostrarlo? Con @media:

@media (color-gamut: p3) {
  .marca { --base: oklch(65% 0.16 175); }
}
@media (color-gamut: rec2020) {
  .marca { --base: oklch(65% 0.20 175); }
}

color-gamut acepta srgb, p3 y rec2020, y es acumulativa: una pantalla que cumple rec2020 también cumple p3 y srgb. La consulta pregunta si el dispositivo aproxima ese gamut, no si lo cubre exactamente.

En la práctica hace falta menos de lo que parece. Si escribes el color en oklch() y resulta estar fuera de sRGB pero dentro de P3, el navegador lo pinta en P3 en una pantalla que pueda y lo mapea en una que no. No necesitas la consulta de medio para eso: la necesitas solo si quieres dar valores distintos a propósito, por ejemplo un color más apagado en sRGB que el mapeo automático no habría elegido.

Los espacios lineales

srgb-linear tiene los mismos primarios y el mismo punto blanco que srgb, y una única diferencia: no aplica la función de transferencia. Sus números son proporcionales a la cantidad de luz, no a la señal codificada.

Eso importa porque casi toda la matemática de composición está definida sobre luz lineal. Sumar dos fuentes de luz es sumar sus intensidades; promediar la luz de dos regiones al reducir una imagen es promediar intensidades. Si haces esas operaciones sobre valores con gamma aplicada, el resultado sale sistemáticamente oscuro, que es el origen del clásico “el degradado se ve sucio en la mitad” y del “la imagen escalada pierde luz”.

/* Mezcla energetica: como se sumarian dos luces. */
.suma { background: color-mix(in srgb-linear, #ff0000, #00ff00); }

/* Mezcla perceptual: como un ojo interpola dos tonos. */
.perc { background: color-mix(in oklab, #ff0000, #00ff00); }

Las dos son correctas para preguntas distintas. srgb-linear responde “qué color sale si mezclo estas dos luces”. oklab responde “qué color está a medio camino visualmente entre estos dos”. Para interfaces quieres casi siempre la segunda; para simular iluminación, transparencias físicas o composición de capas, la primera.

xyz es el otro espacio lineal disponible, y es el que quieres cuando necesitas un intermediario neutro entre dos espacios de primarios distintos sin pasar por ningún modelo perceptual.