Documentación
Generated by AI
Generador de colores TailwindCSS
Ingresa cualquier color para generar automáticamente una configuración completa de paleta de colores de TailwindCSS, aplicable rápidamente a proyectos.
Características
- Genera automáticamente una paleta de colores de TailwindCSS al ingresar un valor de color hexadecimal
- Genera un sistema completo de escalas de color desde 50 hasta 950
- Reconoce inteligentemente nombres de colores, coincidiendo con el sistema de colores estándar más cercano
- Vista previa en tiempo real del efecto de cada escala de color y su valor correspondiente
- Genera automáticamente código de configuración de TailwindCSS listo para usar
Modo de uso
- Ingresa o selecciona un valor de color hexadecimal en el cuadro de entrada (por ejemplo, #cb0101)
- El sistema genera automáticamente la paleta completa de ese color
- Consulta la vista previa de escalas de color a la izquierda para comprender el efecto visual de cada nivel
- El panel derecho muestra el código de configuración de TailwindCSS generado
- Haz clic en el botón copiar del panel de código para copiar la configuración al portapapeles
- Pega el código en el archivo
tailwind.config.jsde tu proyecto
Descripción de escalas de color
La paleta generada incluye las siguientes escalas:
- 50: Tono más claro, adecuado para fondos o resaltados
- 100-400: Serie de colores claros, adecuados para elementos secundarios
- 500: Color principal, generalmente el más cercano al color ingresado
- 600-900: Serie de colores oscuros, adecuados para texto o elementos de énfasis
- 950: Tono más oscuro, adecuado para fondos oscuros o bordes
Cada escala de color está cuidadosamente calculada para garantizar una buena jerarquía visual y contraste en el diseño.
Ejemplo de código de configuración
El código generado puede añadirse directamente al archivo de configuración de TailwindCSS:
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
primary: {
50: '#fef2f2',
100: '#fee2e2',
500: '#ef4444',
900: '#7f1d1d',
950: '#450a0a'
}
}
}
}
}
Casos de uso
- Establecer rápidamente un sistema de colores temáticos para nuevos proyectos
- Expandir el esquema de colores de proyectos existentes
- Explorar efectos de paletas de diferentes colores
- Mantener la consistencia de colores en sistemas de diseño
Consideraciones
- El formato de color ingresado debe ser un valor hexadecimal válido (como #ff0000)
- Las escalas de color generadas se adaptan automáticamente a cambios de brillo y oscuridad, garantizando usabilidad
- La herramienta coincide inteligentemente con el nombre de color estándar más cercano para facilitar la identificación



