Gerador de Tons e Sombras de Cores CSS

Sistemas de design modernos trabalham com escalas de cor — do mais claro ao mais escuro — ao invés de cores únicas. O Gerador de Tons e Sombras cria automaticamente toda a escala a partir de uma cor base, similar ao que você vê no Tailwind CSS ou Material Design.

Diferença entre tints e shades

Tints são versões mais claras de uma cor (adicionando branco), enquanto shades são versões mais escuras (adicionando preto). A ferramenta também gera tones (adicionando cinza), criando variações mais neutras e sofisticadas.

Como usar para sistemas de design

Escolha uma cor primária da sua marca e gere a escala completa com 9 ou 11 variações (100 a 900, como Tailwind). Use as variações claras para fundos, as médias para elementos principais e as escuras para texto e estados hover.

Exportação para código

A ferramenta exporta as escalas como variáveis CSS, configuração Tailwind ou objeto JSON — pronto para integrar diretamente no seu projeto sem trabalho manual.

Experimente: Gerador de Tons e Sombras

Perguntas Frequentes

Quantas variações são geradas?

Por padrão, 10 variações (100-1000). Você pode ajustar para mais ou menos conforme a necessidade do projeto.

A escala usa HSL ou RGB?

A ferramenta usa HSL internamente para gerar variações mais harmoniosas, mas exporta os valores nos formatos que você preferir.

É possível usar como paleta de status (success, error)?

Sim. Gere a escala para verde (success), vermelho (error) e amarelo (warning) e use as variações 500-700 para estados visíveis e 50-100 para fundos de alerta.