🎨 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.

Cor base

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 hexadecimal, o mesmo que aparece escrito dentro do quadrado — a conversão para HSL acontece por dentro, só para calcular a escala. 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.

Perguntas frequentes

Por que o primeiro quadrado dos tons é idêntico à cor que escolhi?

Porque a escala parte dela. Os dez tons saem multiplicando a luminosidade da cor base por 10/10, 9/10 e assim por diante até 1/10, então o primeiro quadrado usa o fator cheio e repete a cor original. Os matizes fazem o caminho inverso, empurrando a luminosidade em direção a 100%, e por isso o último quadrado da segunda fileira é branco puro. Nos vinte quadrados o matiz e a saturação ficam congelados: só a luminosidade do HSL se mexe.

O clique copia o valor em RGB ou HSL?

Copia sempre o hexadecimal. A conversão para HSL acontece por dentro, apenas para calcular a escala, mas o que vai para a área de transferência é o código no formato #rrggbb, o mesmo que aparece escrito dentro do quadrado e na dica ao passar o mouse. Se o seu projeto precisa de rgb() ou hsl(), copie o HEX e passe por um conversor de cores. A confirmação verde some sozinha depois de um segundo e meio.

Digitei um código no campo de texto e nada mudou. Por quê?

O campo só aceita o formato longo. A escala é refeita quando o texto casa com # seguido de exatamente seis dígitos hexadecimais, então #f00, nomes como tomato e valores em rgb() são ignorados em silêncio, e a paleta anterior continua na tela. Escreva #ff0000 e as vinte amostras se refazem na hora. Outro caso que costuma assustar: escolher preto ou branco puro devolve uma rampa de cinzas, porque nesses dois a saturação é zero e não sobra cor para preservar.

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.

🎨

Gerador de Paleta de Cores

Gere paletas de cores harmoniosas a partir de uma cor base. Esquemas: monocromático, análogo, complementar, tríade, tetrádico e split-complementar.

🎨

Ajustar Cor

Clareie, escureça, inverta, desature ou ajuste a saturação de uma cor HEX, RGB ou HSL. Veja o resultado em tempo real com o código da cor resultante.

🔃

Inverter Cores da Imagem

Inverta todas as cores de uma imagem (efeito negativo). Cada pixel é substituído pelo seu complemento RGB. Processado no navegador.