Gerador de Tons de Cor Online Gratuito
Gere tintes e tons a partir de qualquer cor base.
Who uses the Gerador de Tons de Cor?
- Desenvolvedores front-end criando paletas de cores de marca para sistemas de design e bibliotecas de componentes.
- Designers escolhendo variações mais claras ou escuras de cores de marca para estados de hover/ativo.
- Designers de UI construindo escalas de cor coesas para interfaces visualmente consistentes.
How the Gerador de Tons de Cor works
Insira uma cor HEX base ou selecione uma pelo seletor de cores.
A ferramenta gera 9 tons mais claros e 9 tons mais escuros a partir da sua cor base, exibidos como amostras hexadecimais.
Clique em qualquer amostra para copiar seu código hexadecimal para a área de transferência.
A própria cor base é exibida separadamente entre as linhas de tons claros e escuros.
Tips & tricks
- Clique em qualquer amostra — não apenas na cor base — para copiar aquele código hexadecimal específico; um pequeno indicador "Copied!" confirma a ação.
- Não há botão "exportar tudo", então, se precisar de um bloco de código completo com variáveis CSS ou configuração do Tailwind, copie cada amostra necessária individualmente.
- Como a mistura é RGB simples, tints muito claros de cores saturadas podem parecer levemente acinzentados em comparação com ferramentas de paleta com correção perceptual.
- Digite o código hexadecimal diretamente na caixa de texto para obter uma cor precisa, em vez de depender da grade de amostras do seletor de cores.
Frequently Asked Questions
Quantas cores esta ferramenta gera?
19 no total: 9 tints (mais claros, misturados com branco), sua cor base e 9 shades (mais escuros, misturados com preto). As amostras são rotuladas com seus respectivos códigos hexadecimais, não com níveis numerados.
Esta ferramenta usa a convenção de nomenclatura 50–950 do Tailwind?
Não — as amostras são exibidas como códigos hexadecimais comuns, sem rótulos numéricos de nível do Tailwind (50, 100, 200… 950). Você pode mapear os valores hexadecimais gerados para a nomenclatura do Tailwind manualmente, se precisar.
Qual é a diferença entre shade e tint?
Um tint é uma cor misturada com branco (mais clara). Um shade é uma cor misturada com preto (mais escura). Esta ferramenta gera ambas as direções a partir da sua cor base.
Que método de mistura de cores esta ferramenta usa?
Uma mistura RGB linear simples em direção ao branco (tints) ou preto (shades). Não usa um espaço de cor perceptualmente uniforme como o OKLCH, portanto matizes muito saturados podem parecer levemente desiguais ao clarear/escurecer em comparação com tons neutros — não há opção para trocar o método de mistura.
Posso exportar a paleta como variáveis CSS ou um arquivo de configuração do Tailwind?
Não há exportação automática — não existe um botão de exportação em lote. Clique em cada amostra que precisar e cole manualmente seus códigos hexadecimais nas suas variáveis CSS ou configuração do Tailwind.
Is my data safe when using the Gerador de Tons de Cor?
Completely safe. The Gerador de Tons de Cor processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Gerador de Tons de Cor output in commercial projects?
Yes. The Gerador de Tons de Cor is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Gerador de Tons de Cor follow official standards?
Yes. The Gerador de Tons de Cor is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.