Gerador de Paleta de Cores
Escolha uma cor base e gere instantaneamente uma paleta de tons do claro ao escuro, pronta para copiar para o seu sistema de design.
🔒 Processado localmente no seu navegador
Loading…
Como usar
- Digite um código hexadecimal no campo "Cor base", ou clique no seletor de cores para escolher uma visualmente.
- Assim que uma cor válida é reconhecida, uma paleta completa de tons aparece automaticamente abaixo — sem precisar clicar em nenhum botão.
- A paleta vai de um tom bem claro até um bem escuro, todos compartilhando o mesmo matiz da sua cor base.
- Clique em qualquer amostra para copiar seu código hexadecimal para a área de transferência — uma confirmação rápida de "Copiado!" indica que funcionou.
Funcionalidades
- Gera uma escala suave de 9 tons do claro ao escuro a partir de qualquer cor base
- Mantém o mesmo matiz e saturação em todos os tons, assim como as próprias escalas de cor do Tailwind
- Inclui a sua cor base exata na paleta, não apenas uma aproximação
- Cópia em um clique para o código hexadecimal de qualquer amostra
- 100% no navegador — suas cores nunca saem do seu dispositivo
Perguntas frequentes
Essa ferramenta envia minha cor para algum lugar?
Não. Toda a paleta é gerada com cálculos simples em JavaScript diretamente no seu navegador — nada é enviado ou carregado em um servidor.
Como os tons são calculados?
A ferramenta converte sua cor base para HSL e depois mantém o matiz e a saturação fixos, variando a luminosidade de forma uniforme, de muito clara a muito escura. Sua cor base exata é posicionada no meio da escala.
Posso usar essas paletas no Tailwind ou em outros sistemas de design?
Sim. A paleta segue a mesma ideia das escalas de cor 50/100/.../900 do Tailwind — uma progressão de claro a escuro de um único matiz — então você pode copiar os códigos hexadecimais direto para o seu tema ou variáveis CSS.
Quais formatos de cor posso digitar?
Apenas códigos hexadecimais, com ou sem o # inicial, em formato abreviado de 3 dígitos (como #abc) ou de 6 dígitos (como #3b82f6). Use o seletor de cores se preferir escolher visualmente.
Por que aparece uma mensagem de erro?
O texto digitado não corresponde a um formato de cor hexadecimal reconhecível. Verifique se ele se parece com #3b82f6 (ou 3b82f6, ou a forma abreviada #abc).