Central de Conhecimento e Guia
Gerador de Paletas de Cores e Escalas para Tailwind CSS (50-950)
Gerador de Paletas de Cores e Escalas para Tailwind CSS (50-950)
Esta ferramenta opera 100% do lado do cliente. Seus códigos, tokens, credenciais e dados confidenciais nunca saem do seu navegador nem são transmitidos a servidores remotos.
Fórmula e 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).
Melhores Práticas e Dicas
- 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.
Perguntas Frequentes
Por que as tonalidades escuras parecem opacas/lamaçentas?
Se você reduzir a luminosidade usando preto puro, cores vibrantes (como amarelo ou ciano) se transformarão em um verde-oliva opaco. Geradores avançados deslocam o matiz ligeiramente em direção ao azul ou roxo nos tons mais escuros para manter a vivacidade percebida.
Posso usar RGB em vez de HEX?
O Tailwind suporta nativamente Hex, RGB e HSL. No entanto, se você quiser usar os utilitários de opacidade de fundo integrados do Tailwind (como `bg-blue-500/50`), deve configurar as cores usando variáveis 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).