Gerador de Sombras e Tons de Cor | Crie uma escala de 21 passos do claro ao escuro

Informe uma única cor HEX base e veja 10 sombras mais escuras e 10 tons mais claros organizados como uma só escala. Cada amostra mostra seus valores HEX e RGB, então você extrai exatamente os passos necessários para estados hover, bordas, superfícies em modo escuro e tokens de design.

💡 Sobre esta ferramenta

Você escolheu a cor da marca e logo chega o muro que todo desenvolvedor front-end conhece: que cor usar no :hover do botão, no estado desabilitado, na borda sutil, no fundo suave? Ajustar a luminosidade na mão costuma gerar uma escala que foge de tom e parece inconsistente entre os componentes.

Esta ferramenta interpola o RGB base em direção ao preto puro e ao branco puro em passos iguais. As sombras multiplicam cada canal por um fator decrescente; os tons preenchem a distância até 255 com um fator crescente. O resultado é uma escala de 21 passos — 10 sombras, sua base e 10 tons — com uma progressão linear e previsível que você pode mapear direto para nomes de tokens como shade-1 até tint-10.

Cada amostra sobrepõe sua leitura HEX e RGB em uma cor de texto com contraste automático, para que os passos claros e escuros continuem legíveis. Você pode copiar uma amostra isolada ou exportar toda a escala como uma lista comentada de variáveis CSS, o que torna a passagem de um mockup do Figma para uma folha de estilos quase imediata.

🧐 Perguntas frequentes

Qual é a diferença entre uma sombra e um tom? Uma sombra é a sua cor misturada em direção ao preto (mais escura); um tom claro (tint) é a mistura em direção ao branco (mais clara). A mistura em direção ao cinza gera um tom acromático — esta ferramenta foca de propósito nos dois eixos mais úteis: sombra e tom claro.

Como os 10 passos são calculados? As sombras multiplicam cada canal RGB por i/11, com i de 10 a 1. Os tons usam canal + (255 − canal) × i/11, com i de 1 a 10. O denominador 11 mantém o preto puro e o branco puro fora do conjunto, de modo que cada passo continue utilizável e fiel à marca.

Por que não mudar simplesmente a luminosidade HSL? Mover apenas o L do HSL pode deslocar o brilho percebido de forma desigual entre os matizes. A interpolação linear em RGB é mais simples e previsível. Se precisar de uniformidade perceptual, combine com uma ferramenta Lab/OKLCH.

Ele aceita HEX abreviado de 3 dígitos? Sim. Um valor como #f0c é expandido para seis dígitos (#ff00cc) antes do processamento.

Posso exportar toda a escala de uma vez? Copiar tudo gera cada sombra e tom como uma lista rotulada e comentada, pronta para colar em uma folha de estilos como início das suas definições de variáveis.

📚 Curiosidades

Já se perguntou por que Tailwind e Material Design numeram suas cores de 50 a 900? É para que um único matiz de marca se desdobre em uma escala reutilizável e tokenizada. Derivando os passos de forma mecânica desde o início, adicionar um tema escuro depois vira uma questão de decidir qual número inverter em vez de reescolher cores no olho. A divisão entre sombra e tom também lembra a impressão em meio-tom, onde variar o tamanho do ponto de tinta — e não a tinta em si — é o que cria as passagens mais claras e escuras na página.