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.
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.
Ferramentas Relacionadas
Cores da Imagem
Carregue uma imagem e descubra a cor de qualquer pixel em tempo real. Passe o mouse para ver HEX, RGB e HSL com lupa. Extrai automaticamente a paleta de cores dominantes.
Misturar Cores
Misture duas cores e obtenha a cor resultante. Controle o peso percentual de cada cor. Resultado em HEX, RGB e HSL.
Seletor de Cor
Escolha uma cor e obtenha os valores em HEX, RGB e HSL com um clique para copiar.