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 graduacion 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 automaticamente los demas pasos interpolando en espacio de color OKLCH para distribuciones perceptivamente uniformes. El resultado es mucho m?s preciso que un simple calculo HSL porque OKLCH tiene en cuenta como el ojo percibe las variaci?nes 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 minimo), 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 instalacion Tailwind: tienes el hex de marca del brief y necesitas la escala completa. Pega el hex, copia el bloque config, pegalo en
tailwind.config.js. Listo. - Actualizacion de Tailwind v2 a v3: la paleta predeterminada cambio; si tenias 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.
- Verificacion 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
¿Que paso debo usar como color principal de los botones?
El paso 600 suele ser el punto de partida optimo: suficientemente saturado para ser visible, suficientemente oscuro para pasar el contraste 4.5:1 con texto blanco para la mayoria 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?
Tecnicamente 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. Chromaforge tambi?n exporta las custom properties CSS, que se mapean directamente en esta nueva sintaxis.
¿Como gestiono varios colores de marca en el mismo proyecto?
Genera una escala para cada color de marca y renombralas (por ejemplo primary, secondary, accent). En Tailwind tendrás clases como bg-primary-500 y bg-secondary-200, mucho m?s semanticas que bg-blue-500 y bg-teal-200.