🎨 Gerador de Tonalidades e Sombras de Cores (Tailwind Scale & Shades)
Gere escalas completas de 10 tonalidades (50 a 950) estilo Tailwind CSS a partir de qualquer cor base com exportação em CSS e JSON
/* Gerando variáveis de tonalidade... */
📑 Índice do Conteúdo
Como Construir Escalas de Cores Coesas para Design Systems e Tailwind CSS
Em projetos digitais modernos, utilizar apenas uma cor primária estática não é suficiente. É fundamental dispor de uma escala cromática completa que abranja desde tons claríssimos (tints) para planos de fundo e badges, até tons profundos (shades) para tipografia com alto contraste e estados interativos de botões (:hover e :active).
O Gerador de Tonalidades e Sombras de Cores do Web-ZoneWare calcula automaticamente a régua completa de 10 passos — de 50 a 950 —, seguindo os padrões consagrados de Design Systems mundiais como o Tailwind CSS e o Google Material Design.
Entendendo a Hierarquia da Escala Numérica (50 a 950)
| Nível do Passo | Tipo de Variação | Uso Recomendado na Interface (UI) |
|---|---|---|
50 - 100 |
Tint Extremo (90% a 80% branco) | Backgrounds sutis de páginas, cartões e banners de notificação suaves. |
200 - 300 |
Tint Médio | Bordas de inputs, linhas divisórias, tags e badges inativos. |
400 |
Tint Suave | Ícones secundários e placeholders de formulários. |
500 |
Cor Base Pura | A cor de marca primária do projeto e botões de chamada para ação (CTA). |
600 - 700 |
Shade Médio (mistura com preto) | Estados de foco, clique e hover de botões e links de navegação. |
800 - 950 |
Shade Profundo | Títulos, textos de alto contraste e fundos de painéis no Modo Escuro (Dark Mode). |
Recursos de Exportação para Desenvolvedores
- CSS Custom Properties: Gere um bloco de variáveis CSS pronto para copiar e colar no seu arquivo
:root { --primary-50: ...; --primary-500: ...; }. - Objeto JSON para Tailwind: Obtenha a estrutura de configuração pronta para o arquivo
tailwind.config.jsdentro da seçãotheme.extend.colors. - Auditoria de Contraste WCAG: Cada tom exibe dinamicamente o texto em preto ou branco conforme a taxa de luminância relativa, garantindo conformidade com a norma WCAG AAA.
Perguntas Frequentes sobre Escalas de Tonalidades (FAQ)
Qual é a diferença técnica entre Tint, Shade e Tone?
Na teoria clássica das cores: Tint (tonalidade clara) é a cor pura misturada com branco; Shade (sombra) é a cor pura misturada com preto; e Tone (tom) é a cor pura misturada com cinza neutro para reduzir sua saturação.
Como utilizar essa paleta diretamente no Tailwind CSS?
Basta copiar o objeto JSON gerado pela ferramenta e colar na chave colors do seu tailwind.config.js. Você poderá aplicar classes utilitárias imediatamente, como bg-primary-500, hover:bg-primary-600 ou text-primary-900.
A ferramenta preserva a matiz (Hue) da cor ao clarear ou escurecer?
Sim. O cálculo utiliza decomposição no espaço HSL/Lab, mantendo a matiz angular original intacta enquanto ajusta a curva de luminosidade para evitar distorções cromáticas indesejadas.
