El generador de paletas TailwindCSS toma cualquier valor de color hexadecimal y produce una paleta completa de 11 tonos del 50 al 950, junto con el codigo de configuracion listo para pegar en tailwind.config.ts. Tambien compara tu color con la paleta integrada de Tailwind para indicarte si hay un color existente lo suficientemente parecido como para usarlo directamente.
Que aspecto tiene la salida
Introduce #3b82f6 (un azul medio) y la herramienta genera:
colors: {
primary: {
'50': '#eff6ff',
'100': '#dbeafe',
'200': '#bfdbfe',
'300': '#93c5fd',
'400': '#60a5fa',
'500': '#3b82f6',
'600': '#2563eb',
'700': '#1d4ed8',
'800': '#1e40af',
'900': '#1e3a8a',
'950': '#172554',
}
}
El tono 500 es el mas cercano a tu color de entrada. Los tonos 50–400 son variaciones mas claras para fondos, estados hover y bordes; los tonos 600–950 son mas oscuros y se usan para texto, estados activos y sombras profundas.
Donde pegar el codigo de configuracion
Pega el objeto generado en theme.extend.colors de tu tailwind.config.ts para anadir la paleta junto a los colores integrados de Tailwind. Si lo colocas en theme.colors (sin extend), reemplazara todos los colores integrados, incluidos gray, slate, white y black, y perderias esas clases de utilidad por completo.
Cuando el detector de nombre de color sugiere un color integrado
La herramienta compara tu entrada con la paleta integrada de Tailwind y muestra la coincidencia mas cercana (por ejemplo, "mas cercano: blue-500"). Si la distancia es pequena, puede merecer la pena usar directamente el nombre integrado en tu configuracion en lugar de generar tonos personalizados: una paleta menos que mantener.
Formato de entrada
Solo se aceptan valores hexadecimales. El prefijo # es opcional. La abreviatura de tres digitos (#f00) esta soportada y se expande a seis digitos. Los nombres de colores CSS (red, cornflowerblue) y los formatos HSL o RGB no se aceptan y devuelven un error de validacion.