Generador de Tonos y Tintes
Genera una escala completa de 11 pasos desde cualquier color hex. Exporta como variables CSS, config Tailwind, SCSS o JSON.
:root {
--color-brand-50: #f7f5ff;
--color-brand-100: #ede8fe;
--color-brand-200: #dad2fc;
--color-brand-300: #beb3fa;
--color-brand-400: #998ff6;
--color-brand-500: #6366f1;
--color-brand-600: #4e52bc;
--color-brand-700: #3c408d;
--color-brand-800: #2d3269;
--color-brand-900: #21264a;
--color-brand-950: #191f38;
}Preguntas Frecuentes
¿Cuál es la diferencia entre tono y tinte?
Un tono es un color mezclado con negro (más oscuro), mientras que un tinte es un color mezclado con blanco (más claro). Esta herramienta genera ambos.
¿Cómo uso las variables CSS exportadas?
Copia el output del tab CSS y pégalo en tu archivo CSS global o bloque :root. Referencialos con var(--brand-500), var(--brand-100), etc.
¿La escala es compatible con Tailwind CSS?
Sí. Cambia al tab Tailwind y copia el objeto colors. Pégalo en tailwind.config.js bajo theme.extend.colors.