Gerador de Tons de Cor
Comece com uma cor HEX ou referência Pantone e crie uma escala completa para UI, marca, variáveis CSS e Tailwind.
Escolha uma referência Pantone para usar sua aproximação HEX digital como cor base.
Correspondências Pantone são aproximações digitais. Verifique impressões críticas com guias físicos oficiais.
Escala de cor gerada
Clique em qualquer amostra para copiar o HEX ou copie a escala completa para CSS e design systems.
Prévia da UI
Use os tons gerados para fundos, botões, etiquetas e superfícies escuras.
Uma escala prática para UI de produto
Tons claros funcionam para fundos, a cor base para ações principais e tons escuros para texto ou painéis.
O que é um gerador de tons?
Um gerador de tons transforma uma cor base em matizes mais claros, sombras mais escuras e tons menos saturados. O resultado é uma escala coordenada que designers podem usar em botões, fundos, bordas, gráficos e sistemas de marca.
Crie escalas 50-950 estilo Tailwind
O modo padrão gera uma escala 50-950 com 11 etapas, parecida com a nomenclatura comum de tokens em design systems. Você pode copiar valores simples, variáveis CSS, configuração Tailwind ou JSON para entregar a desenvolvedores.
Compare cada tom com Pantone
Cada cor gerada é comparada com a referência Pantone mais próxima deste site, ajudando designers a conectar exploração digital de tons com conversas sobre impressão e marca.
Como usar os tons gerados
Uma escala de tons ajuda uma cor de marca a virar um sistema completo de trabalho. Use valores claros para fundos e estados de hover, valores médios para ações e valores escuros para texto, bordas e superfícies de alto contraste.
FAQ de tons de cor
O que são matizes, sombras e tons?
Um matiz mistura a cor com branco, uma sombra mistura com preto e um tom mistura com cinza. Juntos, eles criam variações controladas da mesma cor base.
Este é um gerador oficial de tons Pantone?
Não. Este site é independente e não é afiliado à Pantone LLC. As referências Pantone exibidas aqui são correspondências digitais aproximadas apenas para planejamento e comunicação.
Posso usar o resultado no Tailwind CSS?
Sim. O modo 50-950 foi pensado para escalas de cor no estilo Tailwind, e a exportação Tailwind entrega um bloco de cores pronto para colar.
Os tons gerados são gerenciados para impressão?
Não. O gerador usa mistura RGB adequada ao navegador para exploração rápida de design. Para cor exata de produção, verifique com ferramentas calibradas e guias físicos oficiais.
Qual é a diferença para o gerador de paleta Pantone?
O gerador de paleta cria harmonias com várias cores. Esta página foca em uma única cor base e cria variações mais claras, mais escuras e menos saturadas dessa cor.
A ferramenta envia minhas cores?
Não. A geração de tons roda no seu navegador. Não é preciso conta, upload ou processamento de cores no servidor.
Mais Ferramentas
Aviso de cor apenas como referência
As cores geradas e as correspondências Pantone são aproximações digitais para planejamento, design de UI e comunicação. Elas não substituem produtos oficiais Pantone, dados licenciados ou verificação com amostras físicas.