Gerador de Escala de Tons e Sombras
Transforme uma cor de marca em uma escala de design system 50-900 — dez tons e sombras com códigos hex, clique para copiar.
733 visualizações
Clique em uma amostra para copiar o hex
De uma cor a um sistema
Design systems (Tailwind, Material) nunca entregam apenas uma cor de marca — eles entregam uma escala de 50 (quase branco) a 900 (quase preto), com a marca situada por volta de 500. Os degraus claros (tons) misturam a base em direção ao branco; os degraus escuros (sombras) em direção ao preto. Este gerador produz as dez paradas padrão com códigos hex e variáveis CSS; clique em qualquer amostra para copiar.
Como a escala é usada na prática: 50-100 para fundos e estados de hover, 200-300 para bordas, 500-600 para botões e links, 700-900 para texto sobre fundo claro. Combinar degraus da mesma escala mantém a interface harmoniosa, e degraus ≥700 sobre ≤100 costumam passar no contraste WCAG — confira o par exato com nosso verificador de contraste.
Perguntas Frequentes
Por que minha cor vibrante parece desbotada nos tons claros?
Misturar em direção ao branco puro reduz a saturação — o que é desejável para fundos. Se quiser tons mais vivos, aumente a saturação da cor base antes de gerar.
Onde minha cor de marca deveria ficar na escala?
Mire em 500-600. Se sua cor de marca for muito clara ou muito escura, posicione-a no degrau que corresponda à sua luminosidade e deixe o gerador preencher as duas direções.
Esses são os mesmos valores que o Tailwind daria?
Não são idênticos — as paletas do Tailwind são ajustadas manualmente por matiz. Esta escala usa uma mistura consistente, previsível para cores de marca personalizadas e próxima o suficiente para projetos reais.
Ferramentas Semelhantes
Reportar um Problema
Gerador de Escala de Tons e Sombras