Gerador de Matizes, Tons e Sombras

Matizes, tons e sombras — qual a diferença?

Os três são derivações da cor base, mas puxam-na em direções diferentes. Um matiz é a cor base misturada com branco, gerando uma versão mais clara e suave — pense em pastel. Uma sombra é a cor base misturada com preto, gerando uma versão mais escura e dramática. Um tom é a cor base misturada com cinza, reduzindo saturação e intensidade sem comprometer-se com mais claro ou mais escuro — útil para paletas sóbrias e sofisticadas. Juntos formam um vocabulário completo para construir escalas monocromáticas.

Como usar este gerador

Escolha uma cor base ou cole um hex. A página gera dez matizes igualmente espaçados (linhas ficando mais claras), dez tons (linhas ficando mais sóbrias) e dez sombras (linhas ficando mais escuras). A porcentagem em cada amostra é o quanto foi misturado com a cor alvo (branco, cinza ou preto). Clique em uma amostra para copiar o hex — útil para preencher uma tabela de design tokens ou um config do Tailwind.

Construindo escalas que funcionam em produção

Não publique todas as 30 amostras — designers raramente precisam dessa granularidade. Escolha 5-7 passos bem espaçados e nomeie-os como uma escala tipográfica (50, 100, 200... 900) para que devs prevejam onde cada novo slot vai cair. Combine matizes e sombras para fundos e ênfase; recorra a tons quando precisar de acentos sóbrios que não brigam com a cor da marca. Sempre verifique contraste contra a superfície onde serão usados — matizes claros geralmente reprovam WCAG contra superfícies brancas, e sombras escuras reprovam contra pretas.

Como cada variante é calculada

Cada saída é uma interpolação linear no espaço sRGB: matiz(c, t) = mix(c, branco, t), sombra(c, t) = mix(c, preto, t), tom(c, t) = mix(c, cinza, t), onde mix(a, b, t) = a·(1−t) + b·t aplicado por canal. Pegamos onze valores de t igualmente espaçados de 1/11 a 10/11, deixando a cor base de fora da tira — sua posição fica implícita entre o matiz mais forte e a sombra mais forte.

Quando usar cada um

Matizes são a escolha certa para fundos de hover, callouts suaves e ilustrações pasteis — esquentam o layout e transmitem calma. Sombras pertencem a estados ativos, cabeçalhos profundos e áreas de ênfase — projetam gravidade e peso. Tons são a arma secreta para design editorial, sites de museu, e qualquer paleta que precisa parecer ponderada em vez de vibrante; conectam marca e neutro sem achatar nenhum dos dois.

Perguntas frequentes

Por que meus matizes parecem opacos?

Misturar em espaço sRGB (que é o que a maioria das ferramentas faz, inclusive esta) é simples computacionalmente mas opticamente imperfeito — média linear em espaço não-linear tende a opacar matizes saturados. Para paletas com direção de arte onde isso é inaceitável, misture em espaço perceptualmente uniforme como OKLCH; espere um pequeno aumento de saturação nos matizes intermediários.

Devo usar luminosidade HSL em vez de misturar com branco/preto?

Luminosidade HSL é um atalho de uma linha mas é perceptualmente desigual — subir L de 50 para 60 muda muito mais um amarelo do que um azul. Misturar com branco/preto dá passos visuais mais previsíveis para escalas monocromáticas, é por isso que usamos como padrão. Se você precisa de passos uniformes de luminosidade percebida em todo o espectro, mude para OKLCH.

As porcentagens batem com tokens Material/Tailwind tipo 50, 100, 900?

Não exatamente. A maioria dos design systems de produção ajusta manualmente os valores de cada passo para consistência perceptual, então uma rampa 50→900 não é uma escala matemática pura. Use este gerador como ponto de partida: escolha os passos que combinam com sua marca, ajuste visualmente, e só então comprometa-se com tokens.

Posso copiar todos os 30 hex de uma vez?

Atualmente cada amostra é copiável individualmente. Para exportação em massa, tire um screenshot da tira — os hex estão impressos nos rótulos visíveis — ou abra DevTools → copie o HTML renderizado, que preserva todos os metadados das amostras.

A ferramenta entende cores nomeadas como "royalblue"?

O seletor e o campo hex aceitam apenas códigos hexadecimais. Para começar de uma cor nomeada, busque o hex correspondente em nossa ferramenta de Cores Nomeadas e cole aqui.

As cores são geradas no meu navegador ou em servidor?

Inteiramente no seu navegador. Abra DevTools → Aba Rede e arraste o seletor — você verá que nenhuma requisição é feita. Auditorias de marca e paletas não lançadas são seguras aqui.

Gerador de Matizes, Tons e Sombras