Generador de paleta Tailwind
Genera una paleta de color Tailwind CSS a medida con las escalas completas de 50 a 950. Copia la configuración lista para tailwind.config e intégrala en tu build.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#F2F2FD',
100: '#E4E5FB',
200: '#BFC0F8',
300: '#9395F6',
400: '#5B5EF5',
500: '#1418EB',
600: '#0C0FC6',
700: '#0508AD',
800: '#010389',
900: '#010265',
950: '#000133',
},
},
},
},
}Genera una paleta de color Tailwind CSS a medida con las escalas completas de 50 a 950. Copia la configuración lista para tailwind.config e intégrala en tu build.
Generador de paleta Tailwind muestra únicamente los controles y resultados que corresponden a su función. Las opciones disponibles dependen de la herramienta y de la entrada.
Formatos compatibles
Cómo funciona
Paso 1
Abre Generador de paleta Tailwind y prepara la entrada solicitada por la interfaz
Paso 2
Ajusta los controles visibles según el resultado que buscas
Paso 3
Revisa el resultado antes de copiarlo, exportarlo o reutilizarlo
Errores comunes a evitar
- No des por compatible un formato u opción que no aparezca en la interfaz.
- Comprueba los valores antes de reutilizarlos en una identidad visual, interfaz o archivo final.
- Si el resultado se usa en texto o componentes de interfaz, revisa también el contraste.
Consejos de profesionales
- Conserva el valor de origen junto al resultado para poder comparar variantes.
- Usa los formatos que muestra realmente la herramienta en lugar de estimar conversiones.
- En móvil y tableta, permite que textos y controles ocupen varias líneas.
Tratamiento de datos
El tratamiento depende de la función utilizada. El consentimiento, la analítica y las funciones de cuenta del sitio son servicios separados de la operación de color.
Qué hace esta herramienta
Genera una paleta de color Tailwind CSS a medida con las escalas completas de 50 a 950. Copia la configuración lista para tailwind.config e intégrala en tu build. Generador de paleta Tailwind se centra en esa tarea y no presupone funciones que no aparecen en su interfaz. Utiliza los controles disponibles para obtener el resultado necesario y comprueba los valores mostrados antes de trasladarlos a otra herramienta, hoja de estilos, archivo de diseño o documento.
Preparar una entrada adecuada
Empieza con la entrada que solicita Generador de paleta Tailwind: color, valor, imagen o ajuste según la pantalla. Los formatos indicados para esta página son Tailwind, CSS, SCSS, JSON. Si un formato u opción no aparece en la interfaz, no lo consideres compatible con esta función concreta.
Leer y comprobar el resultado
Interpreta el resultado según la operación realizada. Compáralo con el valor de origen y revisa los controles que han influido en el cálculo. Para trabajos visuales importantes, comprueba también el resultado en la interfaz real en la que se utilizará y no solo a partir del código.
Uso en móvil y tableta
Generador de paleta Tailwind usa el diseño responsive del sitio. Los títulos, subtítulos, breadcrumbs y controles pueden pasar a varias líneas en pantallas estrechas para que las traducciones largas no se corten. Aun así, revisa el resultado final en el dispositivo y el contexto en los que lo utilizarás.
Reutilizar el resultado en tu proyecto
Después de comprobar el resultado, usa únicamente las acciones que ofrece Generador de paleta Tailwind, como copiar o exportar cuando estén disponibles. Conserva el valor de origen si necesitas reproducir el ajuste y, en trabajos de interfaz, documenta también la función del color y el contraste necesario.
Herramientas relacionadas
Guías y tutoriales
Aprende a usar nuestras herramientas con nuestras guías detalladas.
tailwind-palette: guía práctica de developer
Guía localizada para usar tailwind-palette, entender buenas prácticas de developer y evitar errores comunes.
tailwind-palette: guía práctica de developer
Guía localizada para usar tailwind-palette, entender buenas prácticas de developer y evitar errores comunes.
tailwind-palette: guía práctica de developer
Guía localizada para usar tailwind-palette, entender buenas prácticas de developer y evitar errores comunes.
Preguntas frecuentes
Aprende a usar nuestras herramientas con nuestras guías detalladas.