Generador de tonos Tailwind

Crea una escala de tonos práctica

Un único color de marca rara vez basta para una interfaz completa. Los botones necesitan estados hover, las tarjetas fondos claros, los bordes un matiz más discreto y el texto a veces un compañero más oscuro. Este generador de tonos Tailwind convierte un valor HEX en una rampa 50-950 conocida para que puedas explorar rápidamente cómo se comporta ese color en superficies claras y oscuras. Los valores generados son deterministas y fáciles de copiar, por lo que resultan útiles para prototipos, revisiones de diseño, propiedades personalizadas de CSS y documentación de design tokens.

La herramienta usa pasos de luminosidad HSL para mantener reconocible el tono mientras acerca el color a matices muy claros y tonos profundos. No es un algoritmo oficial de Tailwind ni intenta igualar exactamente las paletas afinadas a mano de Tailwind. En cambio, te ofrece un punto de partida limpio que puedes ajustar en contexto. Si tu color base ya es muy claro o muy oscuro, revisa con atención los valores intermedios y decide si la rampa necesita un ajuste manual.

Usar los tonos generados en CSS

Copia la salida CSS cuando quieras variables listas para el navegador como --brand-500 y --brand-700. Copia la salida JSON cuando prepares tokens para un archivo de configuración, un style dictionary o una página de documentación. En una interfaz típica, 50 y 100 funcionan bien para superficies suaves, 200 y 300 para bordes o insignias, 500 para el color principal de acción y del 600 al 800 para estados hover, pulsado o de texto. Los valores 900 y 950 son los más intensos, así que resérvalos para temas oscuros o elementos de gran énfasis.

Comprueba el contraste antes de publicar

Las escalas de tonos son cómodas, pero no garantizan automáticamente un texto accesible. Un color que se ve equilibrado como muestra puede fallar en contraste detrás de etiquetas pequeñas o controles deshabilitados. Después de copiar una escala, prueba las combinaciones reales que usa tu interfaz: texto principal sobre fondos claros, texto blanco en botones de acción, anillos de foco alrededor de los campos y bordes frente a las superficies cercanas. Considera este generador como un primer paso en el flujo de trabajo de un sistema de color y verifica después las combinaciones finales con un comprobador de contraste antes de publicar.