Curvas de luminosidad: por qué las rampas lineales se ven mal

Construye una rampa azul de diez pasos de la forma obvia. Toma los extremos habituales —luminosidad 0,97 arriba, 0,25 abajo—, divide la distancia entre nueve y reparte saltos uniformes de 0,08. Luego pon el resultado junto a una rampa generada con los mismos extremos, el mismo tono, el mismo plan de saturación. La rampa uniforme no está rota, pero al lado de la curva se ve extrañamente barata: su extremo claro salta de un blancuzco a un azul visible sin nada en medio, mientras que su mitad oscura gasta paso tras paso en azules marino casi intercambiables.

La diferencia es la curva de luminosidad. Las interfaces consumen muchos más valores distintos en el extremo claro de una rampa —fondos, tarjetas, veladuras, bordes sutiles y por defecto se agolpan todos entre L ≈0,84 y 0,97— que en el extremo profundo, así que una escala bien construida distribuye la luminosidad en una curva: pasos muy juntos arriba, zancadas más grandes por los tonos medios. En Scale Composer la curva es por tramos —dos segmentos con sus propios exponentes, que se encuentran en un punto de quiebre al 75 % del recorrido hacia abajo— y el exponente superior lo fija la misma razón que gobierna la escala tipográfica del sitio. Cómo funciona eso, y por qué el espaciado uniforme falla, es esta pieza de nuestra guía de escalas de color.

¿Por qué falla el espaciado uniforme si la luminosidad es perceptual?

La objeción que merece tomarse en serio primero: la L de OKLCH es una medida perceptual —diseñada para que movimientos iguales en luminosidad se vean como movimientos aproximadamente iguales para el ojo—. Divídela de forma uniforme y los pasos sí que se ven uniformemente espaciados. Ese es exactamente el problema: la oferta de pasos es uniforme, y la demanda de ellos no lo es.

Haz el inventario del extremo claro de una pantalla de producto típica: el fondo de la página, la tarjeta sobre él, la franja de la tabla, una veladura de hover, un relleno seleccionado, un borde sutil, un borde de campo por defecto. Siete funciones que necesitan valores distinguibles, todas viviendo entre L ≈0,84 y 0,97. Una rampa lineal concede a todo ese vecindario dos pasos —0,97 y 0,89— con una separación entre ellos demasiado tosca para un par de fondo y tarjeta. Ahora pregunta cuántos casi-negros distintos necesita la misma pantalla: el texto de los títulos, quizá una superficie de alto énfasis. La rampa lineal financia ese extremo con la misma generosidad. El espaciado uniforme no falla perceptualmente sino económicamente: gasta resolución donde nada la necesita.

¿Qué hace en realidad una curva de luminosidad?

Mueve la resolución hacia donde está la demanda. La curva de Scale Composer es por tramos: la rampa se divide en un punto de quiebre, por defecto al 75 % del recorrido hacia abajo, que cae en L ≈0,43. Cada segmento ejecuta su propia curva con forma de exponente, y un exponente superior a 1 agolpa los pasos de un segmento hacia su extremo claro. El segmento superior agolpa los pasos hacia el blanco, dando a las superficies su resolución. El segmento inferior reinicia con suavidad justo debajo del quiebre, creando un segundo bolsillo de pasos muy juntos —los valores de texto oscuro— antes de dar el salto final hacia 900, donde un gran salto es inofensivo porque pocas funciones distinguen entre casi-negros.

Aquí está la curva por defecto (a razón de escala 1,333) frente a la rampa lineal, con los mismos extremos:

Lee primero el extremo claro. La rampa curva coloca tres pasos en L 0,84 o por encima frente a los dos de la rampa lineal —y, no menos importante, sus separaciones están graduadas: ≈0,031 de 50 a 100, luego ≈0,056, luego ≈0,073, frente al 0,080 fijo de la rampa lineal—. El paso de fondo a tarjeta se convierte en un susurro en vez de un bandazo. Luego lee la mitad oscura, donde aparece el segundo bolsillo: la separación curva de 700 a 800 es ≈0,068, más ajustada que las zancadas de ≈0,09–0,11 a su alrededor, exactamente donde una paleta quiere que sus pasos de texto oscuro sean distinguibles.

Abre la curva por tramos de esta rampa en Scale Composer — los diez pasos trazados sobre la curva, el punto de quiebre visible al 75 % y las separaciones graduadas legibles en la lista de pasos.

¿Qué tiene que ver la escala tipográfica con la rampa de color?

En Scale Composer, ambas comparten un mismo número. La razón de escala de todo el sitio —el multiplicador que espacia los tamaños de fuente de la escala tipográfica— también fija el exponente superior de la curva de color:

p₁ = 1 + (ratio − 1) × 1.5

Una escala de cuarta justa (razón 1,333) da p₁ ≈ 1,5. Una tercera mayor más densa (1,25) da 1,375; una cuarta aumentada más dramática (1,414) da ≈1,62. El efecto va en una sola dirección: cuanto mayor es el exponente, más tiempo abrazan el blanco los pasos claros de la rampa antes de caer —a razón 1,25, el paso 100 cae en L ≈0,931; a 1,414 sube hasta ≈0,946, con el descenso por los tonos medios correspondientemente más rápido—.

La consecuencia es un sistema que se mueve al unísono. Elige una escala tipográfica más pronunciada —saltos más grandes entre los tamaños de los títulos, una jerarquía más teatral— y las rampas de color se pronuncian con ella: valores claros retenidos con más finura y durante más tiempo, tonos medios cayendo más rápido. Elige una escala más densa y plana y las rampas se relajan de la misma manera. Si la jerarquía en la tipografía y la jerarquía en el color deberían compartir un temperamento es una postura de diseño más que una ley, pero acoplarlas compra algo concreto: un único mando, y ninguna forma de que los dos sistemas se separen por accidente.

¿Dónde debería situarse el punto de quiebre?

El valor por defecto del 75 % pone el quiebre en L ≈0,43, entre los tonos medios de trabajo y los pasos de texto oscuro, pero es un parámetro, no una constante. Sube el quiebre más arriba en la rampa y el segmento inferior empieza antes: más de la escala se convierte en territorio de resolución de texto. Bájalo y el segmento superior se estira, favoreciendo las superficies. La barrera de seguridad mientras experimentas es la advertencia de JND: cuando dos pasos vecinos cualesquiera quedan a menos de 0,02 L —aproximadamente el umbral por debajo del cual dejan de poder diferenciarse— Scale Composer marca el par, la señal de que una curva se ha forzado hasta que los pasos colapsaron.

Arrastra el punto de quiebre en esta rampa — muévelo arriba y abajo y observa cómo los bolsillos de resolución viajan con él; fuérzalo lo suficiente y la advertencia de JND muestra exactamente qué par de pasos colapsa primero.