¿Qué es una escala de color?

Una escala de color es un conjunto ordenado de tonos de un mismo matiz, numerado por convención de 50 a 900, construido para que los pasos sean perceptualmente uniformes y ciertas combinaciones cumplan ratios de contraste conocidos. Permite elegir colores por función y paso en vez de por valores hexadecimales arbitrarios.

La convención de numeración

La mayoría de sistemas numeran las escalas de 50 (el más claro) a 900 o 950 (el más oscuro), en pasos de 100. La convención viene de Material Design y la reforzó Tailwind, y hoy es lo bastante común como para merecer la pena seguirla.

--blue-50:  #EFF6FF
--blue-100: #DBEAFE
...
--blue-500: #3B82F6
...
--blue-900: #1E3A8A

El valor de una convención compartida es que "usa blue-600 para el borde" significa lo mismo para una diseñadora, para un desarrollador y para un asistente de IA.

Qué hace buena a una escala

Uniformidad perceptiva. Los pasos deberían verse igual de separados. Interpolar en sRGB no lo consigue: produce escalas que se apelmazan en los medios y se enturbian en ciertos matices. Trabajar en un espacio perceptualmente uniforme como OKLCH da resultados bastante mejores.

Contraste predecible. En una escala bien construida, ciertas combinaciones son fiables: el paso 600 o superior sobre el paso 50 aguanta AA para texto de cuerpo, el 500 sirve para texto grande. Cuando esas relaciones se cumplen, la gente deja de comprobar el contraste a mano en las combinaciones rutinarias.

Matiz consistente. El ajuste ingenuo de luminosidad desplaza el matiz en los extremos. Los azules derivan hacia el morado al oscurecerse; los amarillos se van al verde. Mantener estable el matiz percibido a lo largo de la escala exige corrección deliberada.

Cuántos pasos

Diez (del 50 al 900) es el valor por defecto habitual y sirve para la mayoría de productos. Algunos sistemas usan once, añadiendo el 950 para temas oscuros que necesitan algo por debajo del 900.

Menos de siete tiende a dejar huecos donde alguien necesita un tono que no existe, que es exactamente donde empieza la deriva.

Qué escalas necesita un sistema

  • Una escala primaria para el color de marca
  • Una escala neutra o de grises, que se usa más que todas las demás juntas
  • Escalas semánticas para éxito, advertencia, error e información
  • Opcionalmente una escala secundaria o de acento

La escala neutra merece la mayor atención, porque es donde vive de verdad casi toda la interfaz. Un ligero matiz en los grises, cálido o frío, suele ser lo que distingue una interfaz cuidada de una por defecto.

Dónde encaja Flash DSM

Los sistemas generados incluyen escalas completas para colores primarios, secundarios, neutros y semánticos, producidas en un espacio perceptualmente uniforme, con variantes clara y oscura y contraste comprobado en las combinaciones.