Centro de Conocimiento y Guía
Generador de Paletas de Color y Escalas para Tailwind CSS (50-950)
Generador de Paletas de Color y Escalas para Tailwind CSS (50-950)
Esta herramienta funciona 100% del lado del cliente en su navegador. Su código, tokens, claves API y datos confidenciales nunca se envían a servidores externos, garantizando privacidad absoluta.
Fórmula y Método de Cálculo
Luminance Scale = Lerp(Base Color, White [50]) ➔ Base Color [500] ➔ Lerp(Base Color, Black [950])
The generator isolates the primary hue and mathematically scales the lightness channel up for background tints (50 to 400) and down for text shades (600 to 950).
Mejores Prácticas y Consejos
- Lock the 500 Shade to Your Brand: In Tailwind, the 500 shade is traditionally the vibrant, primary brand color used for primary buttons and active states. Build the rest of the scale symmetrically around it.
- Use 50 and 900 for Backgrounds: The absolute lightest shades (50 and 100) are explicitly designed for massive background panels, while the darkest (900 and 950) are designed for highly legible typography.
- Export to Tailwind Config: Once generated, copy the raw JavaScript object directly into the `theme.extend.colors` block of your `tailwind.config.js` file to instantly compile the utility classes.
Preguntas Frecuentes
¿Por qué los tonos oscuros se ven apagados o turbios?
Si reduce la luminosidad utilizando negro puro, los colores vibrantes (como el amarillo o el cian) se convertirán en un verde oliva turbio. Los generadores avanzados desvían ligeramente el tono hacia el azul o el morado en los tonos más oscuros para mantener la vitalidad percibida.
¿Puedo usar RGB en lugar de HEX?
Tailwind admite de forma nativa Hex, RGB y HSL. Sin embargo, si desea utilizar las utilidades de opacidad de fondo integradas de Tailwind (como `bg-blue-500/50`), debe configurar los colores utilizando variables RGB puras.
How many colors should a UI have?
A professional dashboard typically requires one Primary scale (Brand), one Neutral scale (Grays/Text), and four Semantic scales (Success, Warning, Danger, Info).