Una rampa de color es una fila de tonos de un mismo color, de claro a oscuro, como los pasos 50 a 900 de la paleta de un sistema de diseño. Los fondos usan los pasos más claros, los bordes y estados al pasar el cursor los del medio, y el texto los más oscuros. Si los pasos son desparejos, un tono parece un error y todo componente que lo use hereda el problema.
Qué hace que una rampa sea pareja
- La luminosidad cambia lo mismo en cada paso. En un espacio perceptual como OKLCH, números iguales se ven como pasos iguales. En HSL no: un amarillo y un azul al 50% de luminosidad se ven muy distintos en brillo.
- El croma (qué tan fuerte es el color) sigue una curva suave: cerca del gris en los extremos más claro y más oscuro, y más fuerte en el medio.
- El matiz se mantiene, o deriva despacio en una dirección. Los amarillos que se calientan hacia el naranja al oscurecerse son un ejemplo clásico.
Cuántos pasos
De nueve a once es suficiente: 50, 100, 200 hasta 900, y 950 si necesitas un casi negro. Más pasos que usos solo invita a adivinar. Dale un trabajo a cada paso, como 100 para fondos sutiles, 500 para el color de marca y 700 para texto sobre fondos claros.
Cómo revisar una rampa
- Pon los tonos uno junto a otro sin espacios. Un paso malo se ve como un borde más duro o más suave que los de sus vecinos.
- Entrecierra los ojos o desenfoca la pantalla. La luminosidad despareja se ve mejor cuando el detalle desaparece.
- Convierte la rampa a escala de grises: los grises deben avanzar parejo de claro a oscuro.
- Prueba el contraste de los pares que de verdad usarás. Por ejemplo, 700 sobre 50 debe pasar WCAG AA para texto.
En CSS
OKLCH funciona en todos los navegadores actuales. Una rampa es una lista de propiedades personalizadas que comparten matiz y siguen una curva de croma, con la luminosidad bajando lo mismo cada vez:
:root {
--blue-100: oklch(0.93 0.04 255);
--blue-300: oklch(0.77 0.11 255);
--blue-500: oklch(0.61 0.15 255);
--blue-700: oklch(0.45 0.11 255);
--blue-900: oklch(0.29 0.05 255);
}En Figma
Crea los tonos como variables de color en una sola colección, con el nombre del paso (blue/100 a blue/900). Un plugin puede generar una rampa a partir de un solo color, pero compara siempre el resultado con los tonos de ambos lados y vincula los componentes a las variables y no a valores sueltos.
Para practicar
Repara la rampa te muestra nueve tonos de un color con uno roto. Encuéntralo antes de perder tus vidas. La falla se achica en cada nivel y pasa de la luminosidad al croma y al matiz.