Generador de Tonos de Color
Genera una escala de tonos desde un color base.
Genera una escala completa de luminosidad (de 50 a 950, como una rampa de color de un sistema de diseño) a partir de un solo color base. Copia cualquier valor HEX, o exporta toda la escala como variables CSS — ideal para dar estilo a botones, superficies y estados de forma coherente.
Una escala de luminosidad 50–950 lista para design systems y temas de UI.
Todas las conversiones de color se ejecutan localmente en tu navegador — nada se sube, guarda ni registra.
Cómo funciona
- 1 Elige un color base.
- 2 Consulta la escala de tonos de 50 a 950.
- 3 Copia el HEX que necesites.
- 4 Exporta todos los tonos como variables CSS.
Casos de uso comunes
- Crear una rampa de color para un sistema de diseño.
- Elegir los estados hover/activo a partir de un solo color.
- Dar estilo de forma coherente a superficies claras y oscuras.
- Generar pasos de color al estilo de Tailwind.
Preguntas frecuentes
¿Se envían mis datos de color a algún sitio?
No. Cada conversión y cálculo se ejecuta por completo en tu navegador — nada se sube, almacena ni registra.
¿Qué significan los números?
Son pasos de luminosidad (50 = el más claro, 950 = el más oscuro) que siguen la convención usada por muchos sistemas de diseño, de modo que la escala encaja directamente en los temas de interfaz.
¿Cómo se calcula cada tono?
Se mantienen el tono y la saturación del color base mientras la luminosidad se ajusta a cada paso, de modo que toda la escala comparte un mismo tono coherente.
¿Es realmente gratis?
Sí — gratis, sin registro, sin marca de agua y sin límites.