Mapeo de gamut: qué pasa cuando pides un color imposible

oklch() describe colores que existen para el sistema visual humano, y el conjunto de colores que tu pantalla puede producir es mucho más pequeño. Cuando pides uno de los otros no hay error ni aviso: el navegador elige por ti un sustituto, y la calidad de esa elección va desde razonable hasta desastrosa según qué algoritmo use. Vale la pena saber qué está pasando, porque explica por qué a veces dos colores distintos se ven exactamente iguales.

El color que no existe en tu pantalla

Una pantalla produce color encendiendo tres primarios en distintas proporciones. El conjunto de colores alcanzables es el sólido generado por todas las combinaciones de esos tres, y cualquier cosa fuera de ese sólido es literalmente imposible: no hay ninguna manera de encender los subpíxeles para conseguirla.

En coordenadas de sRGB lineal, estar dentro del gamut significa que los tres canales caen entre 0 y 1. oklch(55% 0.2 195) produce un canal rojo negativo, que es lo mismo que decir “haría falta restar luz roja”, cosa que un panel no sabe hacer.

El navegador tiene entonces que elegir un color que sí exista. Hay dos familias de respuestas y la diferencia entre ellas se mide.

Recortar por canal y lo que rompe

La respuesta barata es recortar cada canal a su rango: lo que sea menor que 0 pasa a 0, lo que sea mayor que 1 pasa a 1. Es una línea de código y es lo que han hecho los navegadores durante décadas.

El problema es que recortar canales de forma independiente mueve el color en las tres dimensiones a la vez. Estos son casos medidos:

El primero pedía claridad 55 y devuelve 59.5, con el tono desplazado cuatro grados. En una escala donde has repartido la claridad con cuidado, ese color se sale de la rampa y se nota. El segundo se aclara un punto y medio y se desvía cinco grados de tono.

El cuarto caso es el que mejor ilustra lo que se pierde. oklch(65% 0.3 29) se recorta exactamente a #ff0000, que es el rojo primario. Y no es el único: cualquier color cuyo canal rojo pase de 1 y cuyos otros dos canales queden por debajo de 0 acaba en ese mismo punto. Es decir, el recorte manda familias enteras de colores distintos al mismo sitio. Si construyes una escala de rojos vivos con cinco pasos y tres de ellos están fuera del gamut por ese lado, esos tres serán el mismo color en pantalla y tú los verás distintos en tu portátil P3.

Reducir croma: lo que especifica CSS Color 4

La alternativa es mantener fijas las dos coordenadas que llevan la información estructural —claridad y tono— y sacrificar la que solo lleva intensidad. Bajas el croma hasta que el color entra en el gamut.

Con esa estrategia, los mismos cuatro casos quedan así:

Claridad y tono exactos en los cuatro. El color pierde intensidad, que es lo único que se puede perder, y conserva su sitio en la rampa y su familia.

El algoritmo de la especificación refina esa idea con un detalle: una búsqueda binaria pura sobre el croma llega justo al borde del gamut, y el borde es un sitio incómodo porque las diferencias de un paso de croma ahí son imperceptibles. Así que se permite un recorte pequeño al final, siempre que la distancia entre el candidato y su recorte esté por debajo del umbral de percepción, fijado en 0.02 de delta E en Oklab. Eso se llama MINDE, mínimo delta E, y hace que el resultado quede lo más cerca posible del borde sin pasarse.

flowchart TB
A[Color pedido convertido a oklch] --> B{Cabe en el gamut de destino}
B -- Si --> Z[Se pinta tal cual]
B -- No --> C{Claridad mayor o igual que uno}
C -- Si --> W[Blanco del destino]
C -- No --> D{Claridad menor o igual que cero}
D -- Si --> K[Negro del destino]
D -- No --> E[Busqueda binaria sobre el croma]
E --> F[Se recorta el candidato por canal]
F --> G{Distancia entre candidato y recorte por debajo del umbral}
G -- Si --> Y[Se devuelve el recorte]
G -- No --> H[Se reduce el croma y se repite]
H --> E
style Z fill:#a6e3a1,color:#11111b
style Y fill:#a6e3a1,color:#11111b
style W fill:#94e2d5,color:#11111b
style K fill:#94e2d5,color:#11111b
style E fill:#89b4fa,color:#11111b
style F fill:#89b4fa,color:#11111b
style G fill:#f9e2af,color:#11111b

Las dos ramas de salida rápida de arriba no son casos de esquina inútiles: evitan que un color con claridad fuera de rango entre en el bucle, donde la búsqueda no convergería a nada sensato.

Diseñar con el mapeo en mente

Tres consecuencias prácticas.

El valor calculado no está mapeado. getComputedStyle de un elemento con color: oklch(70% 0.3 150) te devuelve ese mismo color, no su sustituto. El mapeo ocurre al pintar y no deja rastro en el modelo de estilo. Si tu código JavaScript calcula contraste leyendo estilos computados, está midiendo un color que quizá nadie ve.

Fuera del gamut, la distancia se comprime. Dos colores separados en P3 pueden acabar juntos o iguales en sRGB. Por eso todo lo que codifique información —niveles de severidad, pasos de una escala, categorías de un gráfico— tiene que estar dentro de sRGB por construcción. El gamut ancho sirve para que algo se vea mejor, no para distinguir.

Es más barato acotar que confiar. Si generas colores derivando croma, pon un techo:

:root { --c-max: 0.16; }

.acento {
  --base: oklch(58% 0.14 264);
  background: oklch(from var(--base) l min(calc(c * 1.3), var(--c-max)) h);
}

Con min() sabes exactamente qué color se pinta. Sin él dependes de un algoritmo cuyo comportamiento varía entre motores.