Generador de colores Tailwind
Crea una escala Tailwind 50-950 desde un color de marca.
Cómo ayuda
Crea una escala Tailwind 50-950 desde un color de marca.
- Genera paletas desde un color base.
- Comprueba el contraste antes de publicar texto UI.
- Exporta CSS, Tailwind, SCSS, JSON, SVG y PNG.
- Funciona localmente en el navegador.
Cómo funciona el generador de escala Tailwind
Tailwind CSS espera una escala de 11 pasos nombrados 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. Cada paso representa una graduación de luminosidad del color base, del más claro (50) al más oscuro (950).
La herramienta toma tu color de marca — normalmente el paso 500 o 600 — y calcula automáticamente los demás pasos interpolando en espacio de color OKLCH para distribuciones perceptivamente uniformes. El resultado es mucho más preciso que un simple cálculo HSL porque OKLCH tiene en cuenta como el ojo percibe las variaciones de luminosidad entre diferentes hues.
La salida esta lista para pegar en tailwind.config.js bajo la clave colors. Puedes renombrar el color (por ejemplo brand, primary, teal) antes de copiar. Cada paso también se muestra con su valor HEX y RGB, para usarlo füra de Tailwind si es necesario.
Un detalle importante: el paso 50 debe ser legible como fondo de card sobre blanco (se necesita un contraste visual mínimo), y el paso 900 debe superar 4.5:1 de contraste sobre blanco para funcionar como color de texto. La herramienta indica si estos requisitos no se cumplen.
Ejemplos prácticos
- Nueva instalación Tailwind: tienes el hex de marca del brief y necesitas la escala completa. Pega el hex, copia el bloque config, pégalo en
tailwind.config.js. Listo. - Actualización de Tailwind v2 a v3: la paleta predeterminada cambio; si tenías colores personalizados, regenera la escala desde el color de marca original para mantener la coherencia.
- Shadcn/ui: el sistema de componentes shadcn usa variables CSS, pero la escala Tailwind es la base. Genera la escala y luego mapea los pasos en las variables --primary, --secondary, etc.
- Verificación de accesibilidad: comprueba que el paso 700 o superior supere 4.5:1 sobre blanco antes de usarlo como color de texto en los componentes.
FAQ — Escala de colores Tailwind
¿Qué paso debo usar como color principal de los botones?
El paso 600 suele ser el punto de partida óptimo: suficientemente saturado para ser visible, suficientemente oscuro para pasar el contraste 4.5:1 con texto blanco para la mayoría de los hues. Verifica siempre con el comprobador WCAG — azul y violeta suelen funcionar, verde lima y amarillo casi nunca.
¿Puedo agregar pasos extra (por ejemplo 550) a la escala?
Técnicamente si, pero Tailwind no los genera por defecto y rompen las expectativas de quien lee el código. Es mejor usar el paso existente más cercano y ajustar con opacidad (por ejemplo bg-blue-600/80) o usar un valor arbitrario (bg-[#valor]) para casos aislados.
¿La escala generada funciona con Tailwind v4?
Tailwind v4 cambia la configuración hacia CSS-first con @theme. La escala de colores sigue siendo conceptualmente la misma, pero en lugar de tailwind.config.js se define con variables CSS. Chromoforge también exporta las custom properties CSS, que se mapean directamente en esta nueva sintaxis.