¿Deben las rampas de color cambiar de tono?

Coloca una paleta hecha a mano de un sistema de diseño maduro junto a una recién generada y estudia los extremos. En muchas rampas construidas a mano, los pasos claros tiran sutilmente hacia lo cálido y los pasos profundos hacia lo frío: el tono rota a medida que la rampa desciende. Una rampa generada normalmente mantiene un mismo ángulo de tono desde casi blanco hasta casi negro. Cualquiera que note la diferencia llega a la misma pregunta: ¿es la rotación un oficio que a los generadores les falta, o un apaño que los generadores han jubilado?

Sobre todo lo segundo, en parte lo primero. Una rampa de color no necesita cambiar de tono para verse bien: en un espacio perceptualmente uniforme como OKLCH, una rampa de tono constante se lee como un solo color en cada nivel de luminosidad. Buena parte de la rotación tradicional compensaba modelos de color más antiguos en los que un tono constante parecía incorrecto; esa razón ya casi no existe. Lo que queda es una decisión estética legítima: una rotación deliberada de cálido en lo claro y frío en lo oscuro le da a la paleta una temperatura trabajada, algo que las paletas funcionales de UI suelen omitir y que las paletas de marca o de ilustración a veces buscan.

El resto de este artículo separa los dos motivos, muestra una rampa de tono constante construida con valores reales, y termina con la rotación hecha a propósito. El modelo de color que hay detrás vive en nuestra guía de OKLCH.

¿Por qué las paletas hechas a mano rotan el tono?

Durante los años en que las paletas serias se ajustaban muestra a muestra —un oficio documentado en artículos como el de Stripe, sobre cómo diseñar un sistema de color accesible— la rotación de tono era una característica recurrente: rampas cuyos números de tono se deslizan unos grados por paso en vez de quedarse quietos. Parecía puro gusto. Buena parte de ello era reparación.

Los modelos disponibles no cumplían sus promesas sobre el tono. En HSL, un número de tono es un ángulo en la rueda RGB, y no se mantiene fijo perceptualmente: oscurece un color con tono HSL constante y su tono aparente se desvía; los amarillos se derrumban hacia el oliva, los naranjas hacia un marrón que se lee más rojo que su origen. Para construir una rampa que pareciera de un solo tono, rotabas el número de tono en contra de esa deriva, paso a paso, a ojo. CIELAB, el espacio perceptual de su época, tenía su propia versión del problema, concentrada en torno al azul: oscurecer un azul saturado con tono CIELAB constante lo desvía visiblemente hacia el morado, lo que dejaba fuera de alcance una rampa azul honesta de tono constante solo con los números. En ambos modelos, buena parte de la rotación en el archivo no era un cambio de tono que el diseñador quisiera: era el contra-cambio que cancelaba el del modelo.

Esa distinción importa, porque una corrección practicada durante suficiente tiempo empieza a parecer un principio. «Las rampas deben rotar hacia el amarillo arriba y hacia el azul abajo» era, en parte importante, «las rampas construidas en HSL necesitan esto para no verse rotas».

¿Un tono constante se ve realmente constante en OKLCH?

Reparar exactamente esto es buena parte de por qué existe OKLab: sus líneas de tono se ajustaron contra datos de apariencia del color, de modo que un número de tono fijo sigue un tono percibido fijo —incluida la región azul donde CIELAB se dobla. Toma el azul #2563eb, que se sitúa en oklch(0.546 0.215 262.9), mantén el tono en 262,9 y construye la rampa recorriendo la luminosidad a lo largo de una curva mientras el croma sigue un perfil de campana:

Una columna nunca se mueve. En pantalla, cada fila se lee como el mismo azul —más claro o más oscuro, sin desviarse nunca hacia el violeta ni el turquesa— y los pasos profundos aterrizan en un azul marino, que es adonde el ojo espera que vaya este azul a medida que se apaga la luz.

Abre esta rampa de tono constante en Scale Composer: la misma semilla expandida a diez pasos, con el tono fijado durante todo el descenso. Una rampa con este aspecto construida en HSL necesitaría un número de tono distinto en casi cada fila; aquí basta con uno.

¿Cuándo es un cambio de tono la decisión correcta?

Una vez restado el motivo correctivo, queda uno real: la temperatura. La pintura y la fotografía cargan con una larga tradición —que conviene nombrar como tradición, no como una ley de la percepción— de representar la luz cálida y la sombra fría: fuentes de luz doradas, sombras rellenadas por el cielo azul. Una rampa que rota su extremo claro unos grados hacia el amarillo y su extremo oscuro hacia el azul toma prestada esa atmósfera, y el resultado se lee como trabajado: más cerca de cómo se comportan las superficies en una escena iluminada que de cómo se comportan los tokens en una hoja de estilos.

Esa cualidad se gana su lugar en las paletas de ilustración, en mundos de marca con una fuerte identidad pictórica, y en superficies editoriales o de marketing donde a la paleta se le permite ser expresiva. El costo es la simetría: los pasos de una rampa rotada ya no son «el mismo color, más oscuro», así que cualquier cosa derivada de recorrer la rampa —estados hover, tintes de elevación— hereda un cambio de temperatura junto con su cambio de luminosidad.

¿Cuándo debe una rampa mantener su tono?

Para las paletas funcionales de UI, la constancia suele ganar. Los sistemas de color de interfaz se recorren de forma mecánica: estados hover y pressed derivados a un paso de distancia, superficies tintadas a partir de la misma escala, temas oscuros calculados desde los claros. Cada una de esas operaciones asume que moverse a lo largo de la rampa cambia la luminosidad y nada más, una suposición que una rampa rotada rompe en silencio.

También hay una razón perceptual por la que la constancia se siente correcta en una interfaz. El sistema visual trabaja para separar el color de una superficie de la luz que cae sobre ella: la razón por la que un coche rojo sigue leyéndose como rojo al anochecer. Una rampa de tono constante encaja con esa maquinaria: se lee como un solo material bajo luz variable, que es exactamente la ficción que una interfaz necesita que su color primario sostenga a través de estados y elevaciones. Una rampa rotada se lee, en cambio, como una atmósfera, una escena iluminada. Ninguna lectura es incorrecta; responden a encargos distintos.

¿Cómo se rota el tono a propósito, no por accidente?

Si quieres la temperatura, tómala como una decisión con un control asociado, en vez de como una deriva heredada de un modelo. En Scale Composer, cada paleta mantiene su rampa sobre una columna de tono constante y lleva encima un control de desplazamiento de tono: la rotación es explícita, reversible y se aplica donde puedes verla. Comprueba tú mismo la diferencia entre deriva y decisión: desplaza el offset de tono en la rampa de arriba: toda la escala gira unos grados hacia el violeta o hacia el turquesa en un solo movimiento, mientras cada paso de luminosidad se queda quieto.