Escala de color
Generador de tonos de color - Escala UI de 50 a 900
Genera una escala de tonos de 50 a 900 a partir de un color base, copia las variables CSS y previsualiza tonos claros, oscuros y tokens de color listos para UI.
Escala generada
Variables CSS
--color-brand-50: #F4F6FB;
--color-brand-100: #E2EBF8;
--color-brand-200: #C2D5F5;
--color-brand-300: #90B6F4;
--color-brand-400: #5B96F5;
--color-brand-500: #2474F5;
--color-brand-600: #0D5BD9;
--color-brand-700: #0C47A6;
--color-brand-800: #0B3474;
--color-brand-900: #0A2247;Cómo usar esta herramienta
Convierte un color de marca en una escala práctica para interfaces. El generador crea desde tonos muy claros hasta tonos oscuros, los etiqueta como los sistemas de diseño habituales y exporta variables CSS para tu producto.
- 1 Introduce un color base.
- 2 Revisa la escala generada de 50 a 900.
- 3 Copia tonos individuales o el bloque completo de variables CSS.
Preguntas frecuentes
¿Qué son las escalas de color de 50 a 900?
Son pasos etiquetados de muy claro a muy oscuro, habituales en sistemas de interfaz y frameworks CSS utilitarios.
¿El tono 500 es siempre mi color original?
Este generador mantiene el tono y la dirección de saturación de tu color base y crea una escala equilibrada a su alrededor, sin forzar que un paso sea exacto.
¿Puedo usar la escala para colores de texto?
Sí, pero comprueba el contraste entre texto y fondo. Los tonos muy claros suelen funcionar mejor como fondos que como texto.
¿Cómo debo nombrar las variables exportadas?
Usa un prefijo propio del producto, como --color-brand-500, para que la escala se convierta en un token de diseño.