Recorte de gama: por qué se aplastan tus colores

Genera una rampa azul de diez pasos, sube el croma para que el color de marca resplandezca y publícala. Lo que devuelve la pantalla está sutilmente mal: el tinte más claro se ha desviado hacia el cian, los pasos más oscuros se han colapsado en casi duplicados y el azul más profundo tira a púrpura. Nadie escribió nada mal. Varios de los colores solicitados sencillamente no se pueden producir en una pantalla sRGB, y la conversión que los forzó de vuelta al rango los aplastó.

El recorte de gama es lo que ocurre cuando un color existe en tu modelo de color pero no en la pantalla: el valor se fuerza de vuelta dentro de la gama de la pantalla, y el método por defecto más tosco —limitar cada canal RGB de forma independiente— desplaza el tono y la luminosidad junto con el croma, convirtiendo el color en un color distinto en lugar de en uno más apagado. Hay dos remedios: un mapeo de gama adecuado cuando hay que convertir un color fuera de rango, y generar paletas con margen para que ningún paso salga de la gama en primer lugar. Ambos se ven más fácilmente en OKLCH — este artículo forma parte de nuestra guía de OKLCH, donde se presenta el modelo en sí.

¿Qué significa “fuera de gama”?

Un modelo de color es un esquema de direccionamiento, y las direcciones pueden apuntar a nada. OKLCH acepta luminosidad 0,65, croma 0,25, tono 262,9 sin quejarse — una coordenada bien formada que ninguna pantalla sRGB puede mostrar. La gama es el conjunto de colores que un dispositivo o espacio de color puede reproducir realmente, y es un volumen finito e irregular que reside dentro del espacio de coordenadas, mucho mayor, del modelo.

La frontera se imagina más fácilmente como un techo de croma que depende de la luminosidad. Cerca del blanco y cerca del negro casi no hay espacio para el colorido; el techo alcanza su máximo en los tonos medios. En el tono 262,9 — el tono del azul #2563eb, que es oklch(0.546 0.215 262.9) — el techo sRGB se comporta así:

Una carpa, no una pared: alta en el centro, estrechada en ambos extremos. Cualquier petición por encima del lienzo está fuera de gama, y algo tiene que ceder.

¿Qué le hace a un color el recorte ingenuo por canal?

La conversión barata limita cada canal RGB a su máximo. Pide oklch(0.65 0.25 262.9) y las cuentas producen un canal azul lineal de ≈1,36 — un 36 % por encima de lo que la pantalla tiene. Limita cada canal al rango y aterrizas en #3480ff, que se lee de vuelta como ≈ oklch(0.622 0.204 260.4).

Compara petición y resultado: la luminosidad bajó ≈0,028, el croma ≈0,046 y el tono giró ≈2,5° hacia el cian. Solo el croma estaba en exceso, y aun así los tres ejes se movieron — porque el recorte opera por canal en RGB, sin noción de lo que los tres canales significan en conjunto.

Un mapeo de gama adecuado sí tiene esa noción: mantén la luminosidad y el tono, y reduce el croma hasta que el color vuelva a cruzar dentro de la frontera. La misma petición se mapea a oklch(0.65 ≈0.186 262.9) — más o menos #4f89ff — una versión visiblemente más apagada del mismo azul.

La razón perceptual por la que la diferencia importa: el ojo tiende a perdonar «menos colorido» — lo lee como el mismo color, apagado — pero un desplazamiento de tono lo lee como un color distinto. El croma es volumen; el tono es identidad. El recorte ingenuo cambia identidad por salvar volumen, y se vuelve más violento cuanto más lejos queda la petición. Pide un tinte azul casi blanco con croma 0,22 (el techo allí es ≈0,024) y el recorte aterriza en #9ee9ff — tono ≈218, a 45° completos de distancia. El tinte azul se publica como cian.

¿Por qué las rampas se aplanan en vez de solo atenuarse?

Un único color aplastado es un defecto puntual. Las paletas fallan de forma más sistemática, porque una rampa pide croma a lo largo de muchas luminosidades mientras el techo varía por debajo. Allí donde la petición se pasa, cada paso que se pasa queda presionado contra la misma frontera — y pasos diseñados para diferir llegan casi idénticos.

Cifras del extremo oscuro de una rampa azul solicitada con croma constante 0,28, con pasos separados 0,05 en luminosidad:

El espaciado solicitado era 0,05 en luminosidad; el espaciado entregado es ≈0,021–0,025 — menos de la mitad, y justo al borde de una diferencia apenas perceptible. Alrededor de 0,02 L es más o menos donde dos muestras adyacentes dejan de leerse como claramente distintas, razón por la cual Scale Composer dispara un aviso siempre que dos pasos vecinos caen más cerca que eso. Fíjate también en la columna de tono desviándose de ≈264 a ≈269: la banda aplanada ni siquiera es un azul consistente.

Esa es la banda muerta del inicio — no un fallo de renderizado, solo varios pasos compartiendo una misma valla.

¿Cómo generas una paleta que nunca recorta?

Tratando el techo como una entrada en lugar de como un accidente. El arreglo del lado de la generación es el margen: en cada luminosidad, limita el croma solicitado ligeramente por debajo del techo de la gama, de modo que ningún paso necesite recortarse jamás.

Así es como Scale Composer construye escalas de forma nativa: los pasos se colocan sobre una curva de luminosidad, el croma sigue un perfil en forma de campana con un suelo — generoso en los tonos medios donde el techo es alto, afinándose hacia los extremos donde es bajo — y el perfil se limita justo por debajo del techo en la luminosidad de cada paso. El centro vívido se mantiene vívido, los extremos claros y oscuros conservan su identidad, y cada valor que sale era producible desde el principio.

Abre la vista de techo en Scale Composer — la misma semilla azul, con el croma de cada paso cabalgando justo por debajo del techo sRGB mientras sube y baja a lo largo de la rampa. Arrastra el croma hacia arriba y podrás ver qué pasos recortarían primero.

¿Display-P3 soluciona el recorte de gama?

Mueve la valla; no la elimina. Display-P3 — la gama más amplia en la mayoría de móviles y Macs actuales — eleva el techo de croma sobre todo allí donde el color ya vive: en el tono 262,9 el aumento es de solo ≈0,003 cerca del blanco pero ≈0,05 en torno a la luminosidad 0,45–0,50 (de ≈0,225 hasta ≈0,276). Los pasos de tono medio que estaban presionados contra el techo sRGB obtienen espacio real para respirar.

La disciplina sigue siendo la misma, eso sí: P3 tiene su propio techo, y una petición más allá de él recorta igual de mal. Generar con margen contra la frontera P3 es el mismo algoritmo bajo un lienzo más alto. En el modo P3 de Scale Composer cada paso lleva una cadena color(display-p3 …) para las pantallas que pueden usarla, mientras que la columna hex se mantiene recortada a sRGB — respaldo y mejora producidos por una sola escala en lugar de mantenidos a mano.

Mira el alivio donde aterriza

Cambia la misma rampa azul al modo P3 y observa cómo los pasos de tono medio ocupan el nuevo margen: el croma sube exactamente donde la valla sRGB solía presionar, la luminosidad y el tono se quedan quietos, y los extremos claros apenas se mueven. Una vez que has visto el techo como una curva — algo por debajo de lo cual una paleta cabalga en lugar de estrellarse contra ello — el recorte de gama deja de ser un misterioso fallo de renderizado y se convierte en lo que siempre fue: una petición que la pantalla nunca pudo honrar, atrapada en el momento de la generación en lugar de descubierta el día del lanzamiento.