¿Qué es una rampa de color (escala de color)?

Una rampa de color — también llamada escala de color — es un tono expresado como una serie ordenada de pasos de luminosidad: normalmente unas diez muestras del mismo color, desde un tinte casi blanco hasta una sombra casi negra, etiquetadas desde 50 en el extremo claro hasta 900 en el extremo oscuro. La rampa es la unidad atómica con la que se construyen las paletas de UI modernas — una paleta es un conjunto de rampas, no un conjunto de colores individuales.

Esa estructura es hoy casi universal. Material Design de Google organiza todo su sistema en torno a escalas tonales de cada tono, Tailwind entrega cada color por defecto como una escala escalonada, y Radix publica sus colores como escalas de doce pasos. Los recuentos y etiquetas de los pasos difieren; la idea no: el color llega como una familia ordenada, no como una muestra suelta. Este artículo cubre qué es una rampa, para qué sirve cada paso, y por qué se impuso la estructura — la base de todo lo demás en nuestra guía de escalas de color.

¿Por qué un color a muchas intensidades, en lugar de muchos colores?

Cuenta lo que un solo botón azul le pide a una interfaz. Un relleno en reposo. Una sombra al pasar el cursor. Una sombra al pulsar. Una versión deshabilitada. Un anillo de foco. Un lavado pálido detrás de la fila que acaba de seleccionar. Un borde para su variante con contorno. Un azul más oscuro que siga siendo legible como texto de enlace. Un color de marca — y ya son ocho valores distintos, antes de que el modo oscuro duplique la lista.

Esa es la intuición sobre la que se construye la rampa: las interfaces necesitan el mismo color a muchas intensidades mucho más a menudo de lo que necesitan muchos colores. La mayor parte de lo que parece trabajo de color en una UI — estados, énfasis, profundidad, selección — es en realidad trabajo de intensidad sobre tonos que ya están presentes.

Sin una rampa, cada una de esas necesidades se resuelve inventando: un cuentagotas, un «aclarar un 20 %», una estimación a ojo — cada una hecha de forma aislada, cada una ligeramente distinta de la anterior, hasta que el producto arrastra una docena de casi-azules que nadie sabe distinguir ni recordar con fiabilidad. Con una rampa, cada necesidad se resuelve con un vecino: el relleno del hover suele ser el paso siguiente, el lavado de selección viene de los pasos más claros, el borde de los claros intermedios. Elegir sustituye a inventar, y la consistencia deja de depender de la memoria.

¿Qué hace cada paso de una rampa de color?

Las bandas de abajo son una convención práctica compartida por muchos sistemas más que una regla, pero se sostienen bien en la práctica:

• 50–100 — tintes y fondos. Lavados, filas seleccionadas, chips sutiles: color que se siente a lo largo de una superficie más que se mira.
• 200–300 — bordes y rellenos de hover. Divisores, trazos de campos de entrada, los rellenos de estados hover secundarios.
• 400 — el puente. Iconos y énfasis secundario; a menudo el paso menos usado.
• 500–600 — el núcleo de marca. Botones, enlaces, estados activos: la versión del color que la gente nombraría como «el azul de la marca».
• 700–900 — texto y superficies oscuras. Pasos lo bastante oscuros para leerse como texto sobre los tintes claros, y para servir como superficies oscuras con el tono de la marca.

Aquí tienes esa anatomía en una rampa real, generada en Scale Composer a partir del color semilla #2563eb — que es oklch(0.546 0.215 262.9) — con la razón de la escala en 1,333:

Vale la pena extraer dos detalles de la tabla. La propia luminosidad del color semilla (≈0,55) cae entre los pasos 500 y 600 — la rampa generada coloca su núcleo de marca donde el color de marca vive realmente. Y los valores de luminosidad no están espaciados de forma uniforme: los pasos claros se agrupan muy juntos mientras que el extremo oscuro da zancadas más grandes, porque el extremo claro es donde se amontonan los trabajos. Ese espaciado es deliberado — las rampas generadas colocan sus pasos sobre una curva, lo que es un tema en sí mismo.

Abre esta rampa azul de diez pasos en Scale Composer — la misma tabla como muestras en vivo, cada paso etiquetado, con su luminosidad y su hex visibles.

¿De dónde salen los valores de los pasos de una rampa?

En las rampas hechas a mano, del ojo de un diseñador. En las rampas generadas, de reglas — vale la pena un resumen porque explica qué está haciendo la captura de arriba. Los pasos se colocan sobre una curva de luminosidad que concentra la resolución en el extremo claro. La saturación sigue su propio plan, con su pico donde la rampa trabaja más duro y sujeta a un mínimo en los extremos para que estos sigan siendo reconociblemente del tono. El croma se limita por debajo del techo de la gama en cada luminosidad, de modo que ningún paso se recorta hacia un color de aspecto distinto. Y cuando dos pasos vecinos quedan a menos de 0,02 L uno del otro — aproximadamente una diferencia apenas perceptible — Scale Composer avisa de que han empezado a colapsar en la igualdad. Cada regla es un tema en sí mismo; la idea aquí es que los pasos de una rampa se colocan, no se recolectan.

¿Es una rampa de color lo mismo que un degradado?

Relacionados, pero no. Un degradado es continuo — existe cada valor entre dos colores. Una rampa es discreta: un conjunto fijo de pasos con nombre. (El término «color ramp» también existe en herramientas 3D y de datos — el nodo Color Ramp de Blender, las rampas cartográficas — donde suele significar mapear un rango de valores sobre un degradado; el diseño de UI tomó prestada la palabra para la forma escalonada.) Lo discreto es la clave: los pasos pueden nombrarse, referenciarse en el código como design tokens del tipo blue-500, exportarse y versionarse. Un degradado solo puede muestrearse; de una rampa se puede hablar.

¿Cuántos pasos necesita una rampa?

Unos diez es el valor por defecto habitual, y las variantes de Scale Composer lo enmarcan: un conjunto de ocho pasos para paletas más escuetas, diez por defecto, y un conjunto de doce pasos que añade 950 y 975 — casi-negros que se ganan su sitio en las interfaces oscuras. Más útil que el recuento es la distribución: sea cual sea el número, una rampa necesita la mayor parte de su resolución en el extremo claro, donde se amontonan los trabajos de superficie y de borde.

Una rampa se demuestra por lo que puede responder. Pon una muestra suelta junto a una rampa completa en Scale Composer — encarga a ambas la misma tarjeta: un relleno, un hover, un borde, un fondo teñido, texto legible sobre el tinte. La muestra responde una vez y se agota; la rampa tiene un vecino para cada pregunta.