Deja de elegir colores a mano: el método escala-primero

La auditoría que acaba con la mayoría de las carreras del cuentagotas se ve igual en todas partes. Haz grep sobre las hojas de estilo de un producto que lleva unos años creciendo y cuenta los literales de color: auditorías de este tipo suelen sacar a la luz una veintena de azules distintos donde el diseño pretende tener uno. #2563eb en los botones, #2361e8 en un estilo de enlace que alguien igualó a ojo, #1d4ed8 en un gráfico, tres estados hover a pocos puntos RGB unos de otros y un puñado de azules que nadie sabe datar. Ninguno está mal en su propia pantalla, y ese es justo el problema. Cada uno se eligió para verse bien en algún sitio, y ninguna regla los conecta.

El método escala-primero invierte el flujo de trabajo: en lugar de elegir los colores de uno en uno, fijas las reglas —un color semilla, los extremos de la escala, una curva de luminosidad, un perfil de croma— y generas cada valor a partir de ellas. Dos colores cualesquiera concuerdan entonces por construcción, porque ambos son salidas del mismo pequeño sistema y no actos de juicio independientes. Es el método que recorre nuestra guía de escalas de color; este artículo lo defiende, dirigido a cualquiera que siga eligiendo valores a ojo.

¿Cuánto cuesta realmente elegir a mano?

El impuesto del cuentagotas tiene cuatro partidas, y los equipos suelen pagar las cuatro.

Inconsistencia. Nada ata una elección a la siguiente. El azul elegido para un botón en marzo y el azul elegido para un banner en septiembre se juzgaron contra vecinos distintos, en pantallas distintas, y no concuerdan: la auditoría de los veintitrés azules es esta partida acumulándose.

Valores imposibles de recordar. #2361e8 no se puede recordar, ni derivar, ni explicar; solo se puede consultar. Una paleta elegida a mano es una lista de hechos arbitrarios, y cada diseñador e ingeniero que la toca debe o memorizar la lista o —más a menudo— aproximarla, lo que alimenta la primera partida.

Contraste re-comprobado por cada par. Sin ninguna estructura que garantice nada, cada nueva combinación de texto sobre fondo es una comprobación de accesibilidad desde cero. Una paleta de cien valores tiene miles de pares posibles; los sistemas elegidos a mano los afrontan de uno en uno, informe de error a informe de error.

El modo oscuro como segundo proyecto. Una paleta clara elegida a mano no ofrece ninguna regla que consultar cuando llega el tema oscuro, así que cada valor se vuelve a elegir: el impuesto entero, pagado dos veces.

¿Por qué la elección local falla a nivel global?

La razón intuitiva está en la percepción. El juicio del color es relacional: el mismo valor se lee distinto sobre blanco, sobre una tarjeta gris, junto a un vecino saturado. Cuando ajustas un color con el cuentagotas hasta que se ve bien, lo estás optimizando contra un fondo en una pantalla: un juicio local, y por lo general acertado. Pero una interfaz son cientos de contextos así, y veinte juicios acertados a nivel local no se ensamblan en un sistema, porque cada uno respondió a una pregunta distinta. Lo que el ojo realmente sigue a lo largo de un producto no son los valores en sí, sino las relaciones entre ellos —esta superficie un poco más oscura que aquella, este texto cómodamente por encima de su fondo—, y las relaciones son justo lo que la elección color a color no puede producir. Las reglas producen relaciones; las elecciones producen puntos.

¿Cómo se ve “fijar las reglas” en números?

En concreto, un azul escala-primero cuesta cuatro decisiones. Semilla: #2563eb, que es oklch(0.546 0.215 262.9). Pasos: diez, etiquetados 50–900. Luminosidad: de 0,97 hasta 0,25 a lo largo de una curva por tramos. Croma: un perfil de campana que alcanza su pico en el propio 0,215 de la semilla, con un suelo del 12 % para que los extremos nunca se vuelvan grises. Esas cuatro decisiones producen la rampa entera — cinco de sus diez pasos:

Cada valor de la tabla es una salida. Nadie eligió el 300; se deriva de la curva y del perfil, y seguirá derivándose de ellos cuando cambie la semilla. El modo oscuro deja de ser un segundo proyecto por la misma razón: una paleta oscura se deriva de la misma semilla con su propia curva de luminosidad y un aumento de croma de aproximadamente un 20 %, en lugar de volver a elegirse desde cero. Y el contraste deja de ser una auditoría par por par, porque los roles se asignan contra suelos de contraste como parte de la generación. Los equipos que han reconstruido sus paletas de esta forma han documentado el mismo intercambio: el relato de Stripe sobre la reconstrucción de su sistema de color es un buen ejemplo público de un contraste que llega por construcción y no por pruebas a posteriori.

Abre estas reglas en Scale Composer: la semilla, la curva de luminosidad y el perfil de croma en una sola pantalla, con los pasos generados debajo. Arrastra cualquier regla y observa cómo cada valor la sigue.

¿Qué juicio no elimina el método escala-primero?

La mitad honesta del argumento: la generación no deja la paleta libre de decisiones, sino que cambia qué decisiones existen. La semilla se sigue eligiendo, no se deriva; ninguna regla conoce tu marca. La asignación de rol a cada paso sigue siendo una decisión: la luminosidad de la semilla, 0,546, cae entre el 500 generado (L ≈0,63) y el 600 (L ≈0,52), y decidir cuál de ellos hace de color de botón operativo es un juicio, que suele resolverse por el contraste con texto blanco. La temperatura de los neutros, si existe siquiera algún tono de apoyo, hasta qué punto pueden alzar la voz los colores funcionales: todo eso sigue siendo tuyo.

El planteamiento correcto es que el juicio sube de nivel en lugar de desaparecer: de elegir valores a diseñar reglas. Un flujo de trabajo de elección a mano gasta atención de diseño en cientos de decisiones pequeñas y sin registrar; un flujo escala-primero la gasta en quizá media docena de decisiones grandes y legibles. La media docena es más difícil —un extremo o la forma de una curva acarrea más consecuencias que cualquier hex por separado—, pero se toman una sola vez, se escriben y las hereda cada valor aguas abajo.

¿No ha dado ya la tipografía este paso?

Un precedente útil, ofrecido como paralelismo y no como prueba: los tamaños de fuente pasaron por la misma inversión hace años. Los tamaños en puntos elegidos a mano dieron paso a las escalas tipográficas modulares —eliges una base y una razón, y cada tamaño se deriva— y, en muchos sistemas de diseño modernos, generar los tamaños a partir de una escala es sencillamente como se hace la tipografía. El color es ese mismo paso, que llega más tarde, y parte del retraso fue técnico: una escala tipográfica necesita una multiplicación, mientras que una escala de color necesita un espacio perceptualmente honesto para que sus reglas se comporten —pasos iguales en la regla que se leen como pasos iguales para el ojo—. Eso es lo que aporta trabajar de forma nativa en OKLCH, y es la razón por la que el color basado en reglas se ha vuelto práctico y no solo cuestión de principios.

La forma más rápida de sopesar el argumento es contra tu propia marca. Genera una escala a partir de tu propia semilla: pega el hex alrededor del que ahora andas con el cuentagotas y compara lo que producen las reglas con los azules que encontró tu última auditoría.