Gerador de Tons de Cor
Gere tons e matizes para qualquer cor. Escolha uma cor base e o número de tons, obtenha valores HEX, RGB e HSL. Grátis, 100% no navegador.
Referência
O que são matizes e tons?
Na teoria das cores, um matiz (tint) é qualquer cor misturada com branco (tornando-a mais clara), e um tom (shade) é qualquer cor misturada com preto (tornando-a mais escura). Juntos, formam uma paleta monocromática — variações de uma única matiz em diferentes níveis de luminosidade. Esta ferramenta gera uma escala completa do branco, passando pela cor base, até o preto, fornecendo uma rampa de cores pronta para uso em design e desenvolvimento.
Casos de uso para tons de cor
Sistemas de design — gere uma escala de 9 ou 11 tons para uma cor da marca, seguindo o padrão usado pelo Tailwind CSS (50–950), Material Design e a maioria dos sistemas de design modernos. Estados de componentes UI — use matizes mais claros para fundos e estados hover, a cor base para ações primárias, e tons mais escuros para texto, bordas e estados ativos. Visualização de dados — crie escalas de cor sequenciais do claro ao escuro para mapas coropletas, heatmaps e gráficos onde a intensidade representa magnitude. Acessibilidade — encontre pares de tons que atendam aos requisitos de contraste WCAG (4.5:1 para texto normal, 3:1 para texto grande).
Como os tons são gerados
Os tons são gerados por interpolação linear no espaço RGB do branco (#FFFFFF), passando pela cor base, até o preto (#000000). Para N tons, a cor base aparece no ponto médio da escala. Cada passo mistura uniformemente, produzindo uma progressão de luminosidade consistente. A saída está disponível nos formatos HEX, RGB e HSL — copie valores individuais ou a paleta inteira de uma vez.
Privacidade
Toda a geração de cores é executada 100% no seu navegador. Nenhum dado é enviado a nenhum servidor.