Por qué los pasos de color se numeran de 50 a 900

Los números 50–900 de una escala de color son etiquetas de posición que van de claro a oscuro: el 50 es el tinte más tenue, el 500 se sitúa a mitad de la rampa como el núcleo de marca convencional, y el 900 es el paso más oscuro. El esquema lo popularizó Material Design de Google en 2014 y se extendió a través de Tailwind CSS — y, como los números de grosor de fuente (font-weight) a los que se parece, los valores nombran posiciones, no cantidades medidas.

Esa breve historia responde a la pregunta literal. Las preguntas más útiles son por qué los números superan a los nombres, por qué la escala empieza en 50 y no en 100, y para qué sirven los espacios entre las centenas — convenciones que conviene entender más que memorizar, que es el hilo conductor de nuestra guía de escalas de color.

¿De dónde salió la numeración 50–900?

Cuando Google lanzó Material Design en 2014, su sistema de color presentaba cada tono como una rampa numerada: 50, y luego de 100 a 900 en pasos de cien, con el 500 tratado como el tono de identidad — el valor que las guías llamaban el color primario. Tailwind CSS adoptó la misma numeración para su paleta por defecto y la llevó a la corriente principal del desarrollo; sus escalas iban originalmente de 100 a 900, y se añadieron un tinte 50 y un casi-negro 950 en los extremos a medida que las interfaces reales los pedían. Radix siguió su propio camino con pasos numerados del 1 al 12 — lo que es en sí mismo prueba de que la idea que sostiene todo son las posiciones numéricas ordenadas, no los valores concretos.

Los números de escala de color se leen como la numeración de font-weight en CSS — de 100 a 900, con 400 como normal y 700 como negrita — y vale la pena declarar el paralelismo como tal: haya inspirado o no un esquema al otro, ambos resuelven el mismo problema de la misma manera. Una cuadrícula numérica gruesa, de claro a pesado, con espacio libre entre los valores.

¿Por qué números en lugar de claro, más claro, clarísimo?

Los nombres se derrumban al extenderse. Dos variantes de un azul pueden ser claro y oscuro; cuatro pueden, con esfuerzo, ser clarísimo, claro, oscuro y oscurísimo; con diez, nombrar se vuelve absurdo. Los números sobreviven porque hacen tres cosas que los nombres no pueden:

• Ordenan. De blue-100 a blue-900 se ordenan solos en una lista de tokens, una exportación, un desplegable de autocompletado. Los pasos con nombre se ordenan alfabéticamente: claro, clarísimo, oscurísimo, oscuro — un revoltijo.
• Se extienden. Insertar un paso entre «claro» y «más claro» obliga a renombrar en todo el sistema; añadir un 950 a una escala de 100–900 no renombra nada.
• Comunican distancia. Pasar de 300 a 700 es visiblemente mayor que pasar de 500 a 600, y «dos pasos más oscuro» es aritmética. La distancia entre «claro» y «más oscuro» está indefinida.

¿Por qué la escala empieza en 50 — y qué significa el 500?

El 50 responde a una necesidad real: un tinte por debajo de 100, para lavados casi blancos y fondos de página para los que el 100 ya resultaba demasiado colorido. Su etiqueta sigue la lógica de la propia cuadrícula — la mitad de 100, un paso por debajo del primer paso completo.

El 500 es el punto medio del recorrido 100–900, y la decisión de Material de tratarlo como el tono de identidad de cada color se endureció hasta convertirse en un hábito de toda la industria: cuando alguien dice «nuestro azul», normalmente se refiere al 500 — o al 600, ya que los botones con texto blanco a menudo empujan el núcleo un paso más oscuro para lograr contraste. También hay una razón física por la que el núcleo gravita hacia la mitad de la rampa: cerca de los extremos de luminosidad un tono no puede mantener mucha saturación, así que la versión más reconociblemente asociada a la marca de un color tiende a vivir en los tonos medios.

Abre una rampa 50–900 completamente etiquetada en Scale Composer — diez pasos con sus números, luminosidad y valores hex visibles: el vocabulario de este artículo, en vivo.

¿Para qué sirven los espacios entre los números?

Espacio para insertar. Un esquema numerado del 1 al 10 estaría lleno; un esquema que va en centenas puede hacer crecer nuevos valores sin renombrar ni un solo paso existente. Así es como el esquema ha evolucionado en la práctica: las interfaces oscuras crearon demanda de varios casi-negros muy cercanos entre sí — colores de superficie justo por encima del negro puro — y las respuestas cayeron en el espacio por debajo de 1000. La variante de doce pasos de Scale Composer funciona así: añade 950 y 975 a los diez pasos por defecto, extendiendo el extremo oscuro mientras cada otra etiqueta se queda en su sitio.

¿Un 500 significa lo mismo en todos los sistemas?

No — y este es el núcleo honesto del tema: los números son posiciones, no medidas. Ningún estándar define qué luminosidad debe tener un 500, así que nada garantiza que los 500 de dos sistemas coincidan. El blue-500 de Tailwind, el blue 500 de Material y el 500 de tu paleta son tres colores distintos que casualmente comparten una dirección.

Las propias variantes de conjuntos de pasos de Scale Composer demuestran el punto dentro de una sola herramienta. Los tres conjuntos reparten sus pasos de forma uniforme por el mismo rango de luminosidad (de L ≈0,97 hasta ≈0,25), así que la misma etiqueta cae en una luminosidad diferente según cuántos pasos comparten la rampa:

La fila del 500 varía en más de lo que vale un paso completo de luminosidad, y la fila del 900 es más marcada: en el conjunto de doce pasos, el 900 se sitúa en L ≈0,40, porque 950 y 975 se han apoderado del extremo profundo. Misma semilla, misma herramienta, misma etiqueta — color diferente. La regla práctica se deduce: dentro de un sistema, navega por las etiquetas; al comparar entre sistemas, compara la luminosidad y el contraste medidos, no los números.

¿Qué conjunto de pasos deberías elegir — 8, 10 o 12?

Los tres conjuntos corresponden a tres situaciones. Ocho pasos (50, 100, 300, 500, 600, 700, 800, 900) encaja con paletas ligeras — sitios de marketing y productos pequeños donde tomar menos decisiones es una ventaja; el conjunto descarta el 200 y el 400, los pasos con menos funciones. Diez es el valor por defecto con el que la mayoría de la UI de producto encaja cómodamente. Doce (añadiendo 950 y 975) es para productos con mucho modo oscuro, donde las superficies necesitan casi-negros distinguibles que una escala de diez pasos no incluye.

La diferencia es más fácil de juzgar con ambos en pantalla. Compara los conjuntos de 8 y 12 pasos sobre la misma semilla — mismo color, mismo rango de luminosidad; observa qué compran los pasos adicionales en el extremo oscuro, y qué te ahorra el conjunto más ligero en todo lo demás.