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.js de 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

Generador de Paleta TailwindCSS