1001Ferramentas
🎨 Utilitários

Gerador de Tons de Cor

Gere tons (shades) e matizes (tints) de qualquer cor. Clique para copiar o código HEX, RGB ou HSL. Ideal para sistemas de design.

Clique em qualquer swatch para copiar o HEX

Tons (Shades)

Matizes (Tints)

Como usar?

Defina uma cor base no seletor ou digite um código HEX direto. A partir dela saem 10 tons mais escuros (shades) junto com 10 matizes mais claros (tints). Para copiar o código HEX de qualquer um, é só clicar no quadrado correspondente.

Ferramentas Relacionadas

Tons e matizes de qualquer cor

Uma cor sozinha quase nunca dá conta do recado. Botões, estados, fundos e bordas pedem a mesma cor em versões mais claras e mais escuras, e é isso que sustenta um sistema de design. Você escolhe uma cor de partida e o gerador monta a escala inteira de tons (shades, mais escuros) e matizes (tints, mais claros) sozinho.

Toda variação já vem com o código pronto. Um clique copia o valor em HEX, RGB ou HSL, no formato que o seu projeto pedir. Nada de escurecer e clarear a cor no olho torcendo para o conjunto ficar harmônico: você recebe uma escala coerente de uma vez, uma base sólida para o seu design system.

Para quem é designer ou dev e precisa de consistência cromática, isso resolve um problema chato. A geração acontece toda no navegador, partindo da cor que você definir.