Gerar Paleta de Cores a partir de Uma Cor
Crie uma paleta completa a partir de uma cor base — tons, complementares e análogas — e copie cada código HEX.
Clique em qualquer amostra para copiar seu HEX.
Gerada localmente
Segura para marcas não lançadas
Sem conta
Conexão segura
Como funciona
- 1
Escolha uma cor base
Cole um código HEX — normalmente a cor de marca com a qual você já se comprometeu.
- 2
Escolha a regra de harmonia
Complementar para contraste, análoga para calma, triádica ou tetrádica para variedade, tons para uma escala de um matiz só.
- 3
Copie a paleta
Leve os valores HEX direto para a sua folha de estilo, editor de tema ou ferramenta de design.
Por que usar esta ferramenta
Cinco regras de harmonia
Complementar, análoga, triádica, tetrádica e tons; cada uma é uma relação definida no círculo cromático, não um clima.
Uma entrada, conjunto inteiro
Informe a cor de marca que você já tem; o resto é derivado dela, então a paleta fica ancorada e não montada.
Valores HEX copiáveis
Cada amostra vem com o código dela, pronta para uma folha de estilo ou um arquivo de design.
Ver a relação
As cores geradas aparecem juntas, que é o único jeito de julgar se a combinação se sustenta.
Nada é enviado
A aritmética do círculo roda no seu navegador — nenhum valor de cor vai para lugar nenhum.
Grátis e sem conta
Sem cadastro, sem limite de paletas e sem marca d’água.
O que é de fato uma regra de harmonia
As regras são posições num círculo de matizes, não opiniões estéticas. Pegue o ângulo de matiz da cor base e a regra diz onde ficam as outras: complementar a +180°, análoga a mais ou menos ±30°, triádica a +120° e +240°, tetrádica como dois pares complementares. Esse é o mecanismo inteiro. A utilidade delas não é que essas combinações sejam objetivamente bonitas — é que elas são **previsíveis**. Uma paleta construída por regra falha de um jeito sobre o qual você consegue raciocinar, enquanto uma paleta montada escolhendo amostras que pareciam boas isoladamente costuma falhar de um jeito que ninguém consegue diagnosticar, porque não há relação alguma para inspecionar.
Escolhendo entre as regras
Cada regra resolve um problema diferente. Matizes análogos ficam lado a lado e compartilham ar de família, o que os deixa seguros e discretos — bons para um fundo ou uma ilustração, fracos quando algo precisa se destacar. A complementar maximiza a separação, que é exatamente o que um destaque exige: uma cor dominante e um matiz oposto usado com parcimônia para a ação que você quer que seja clicada. A triádica dá três matizes distintos que ficam equilibrados, mas só se um dominar claramente e os outros dois apoiarem. A tetrádica oferece quatro e é genuinamente difícil; a maioria das paletas tetrádicas que funcionam na prática usa duas das cores numa fração da área das outras duas.
Por que uma interface precisa mais de tons do que de matizes
As regras acima respondem “quais cores combinam”, mas um produto real precisa de outra coisa: muitos degraus da mesma cor. O fundo de uma página, a superfície de um cartão, uma borda de um pixel, um rótulo desabilitado e o texto de corpo costumam ser o mesmo matiz em luminosidades diferentes, e ter esses degraus bem espaçados afeta o resultado final mais do que a escolha entre triádica e tetrádica. É isso que o modo tons produz — um matiz só escalonado em luminosidade, que é exatamente como se constrói a escala de cor de um design system. A maioria dos projetos precisa de um matiz de destaque e de uma boa escala neutra muito mais do que de cinco matizes distintos.
Uma paleta gerada é ponto de partida, não design system
O que o círculo entrega são relações entre matizes. O que ele não consegue entregar são papéis. Uma paleta que funciona atribui a cada cor um trabalho — esta é a superfície, esta é a ação principal, esta é a ação destrutiva, esta é a borda — e essas atribuições dependem da sua interface, não da geometria. O círculo também não sabe nada sobre legibilidade: um esquema triádico pode estar perfeitamente equilibrado e ainda assim colocar texto sobre um fundo a 2,5:1. Gere as relações aqui, atribua os papéis você mesmo e passe cada par de texto sobre fundo pelo verificador de contraste antes que qualquer coisa chegue a uma biblioteca de componentes.
A proporção 60-30-10
Uma falha comum é tratar uma paleta de cinco cores como licença para usar cinco cores igualmente, o que produz uma interface carregada e sem ponto focal. A convenção que sobrevive ao contato com layouts reais é mais ou menos 60% de um neutro dominante, 30% de um secundário e 10% de destaque. Sob essa proporção, um par complementar não são duas cores em disputa — são uma superfície grande e calma e uma interrupção pequena e deliberada. É também por isso que paletas ficam melhores num mockup do que em produção: o mockup mostra as amostras do mesmo tamanho, e a interface não vai mostrar.
Converter e ampliar uma paleta
Com o conjunto em mãos, o trabalho prático é transformá-lo em algo que uma folha de estilo consiga usar. Os valores de matiz chegam do círculo em HEX; se você planeja derivar variantes de hover, ativo e desabilitado, converta primeiro para HSL com o conversor de cor e escalone a luminosidade, porque isso mantém cada variante na mesma família de matiz em vez de deixá-la desviar. Guarde as cores base como fonte única de verdade e gere as variantes a partir delas, em vez de armazenar dezenas de códigos hex quase idênticos — uma paleta que cresce na mão fica incoerente em poucos meses.
Erros comuns que vale evitar
- Usar todas as cores da paleta com o mesmo peso. Cinco cores em área igual produzem uma interface sem ponto focal; mantenha por volta de 60% dominante, 30% secundário e 10% destaque para o destaque realmente se ler como um.
- Escolher o esquema antes de saber o que precisa se destacar. A análoga é calma e fraca para ênfase; a complementar existe para tornar um elemento impossível de ignorar. Escolha a regra pela função, não pela aparência das amostras.
- Supor que uma paleta equilibrada é legível. O círculo cromático não sabe nada sobre razões de contraste — um par harmonioso ainda pode deixar o texto a 2,5:1 contra o fundo.
- Construir uma interface só com matizes. Superfícies, bordas, estados desabilitados e texto de corpo são quase sempre um mesmo matiz em luminosidades diferentes; uma boa escala de tons vale mais no dia a dia do que uma quarta cor de destaque.
- Escolher na mão as variantes de hover e ativo como novos códigos hex. Derive-as escalonando a luminosidade em HSL a partir da cor base, ou a família desvia de matiz conforme a paleta cresce.
Comparação
| KeroTools | Galerias de paletas | Software de design | |
|---|---|---|---|
| Parte da sua cor de marca | Sim | Geralmente aleatório | Sim |
| Regras de harmonia nomeadas | Cinco | Raramente indicadas | Sim |
| Valores enviados a um servidor | Nunca | Frequentemente | Não |
| Exige conta | Não | Frequentemente para salvar | Exige licença |
| Funciona offline | Depois do primeiro carregamento | Não | Sim |
| Custo | Grátis | Grátis / pago | Pago |
Recursos
Complementar
O matiz exatamente oposto, a 180° — separação máxima, usada para um único destaque diante de uma cor dominante.
Análoga
Matizes vizinhos a cerca de 30° de distância, que compartilham ar de família e se leem calmos e coerentes.
Triádica
Três matizes espaçados de 120° — vivos e equilibrados, mas exige um dominante claro.
Tetrádica
Quatro matizes em dois pares complementares; o esquema mais rico e o mais difícil de equilibrar.
Tons
Um matiz escalonado em luminosidade — a escala de que as interfaces realmente precisam para superfícies, bordas e texto.
HEX em cada amostra
Cada cor gerada carrega seu código, pronta para copiar.
Sem instalação
Nada para baixar ou instalar — funciona na própria página web.
Compatível com árabe e RTL
Interface completa em oito idiomas, incluindo árabe da direita para a esquerda.
Seguro por padrão
Servido por HTTPS, sem rastreio de arquivos e sem envio a terceiros.
Quem usa
Designers
Derivar um conjunto coerente de uma cor de marca existente em vez de juntar amostras a olho.
Desenvolvedores front-end
Conseguir uma escala de tons para superfícies e bordas sem escolher uma dúzia de cinzas na mão.
Donos de pequenos negócios
Ampliar a única cor de um logotipo para algo usável num site e no material impresso.
Quem personaliza um template
Preencher os campos de secundário e destaque que um editor de tema pede, partindo de uma cor que já têm.
Perguntas Frequentes
Não. Tudo roda localmente no seu navegador — nada é enviado, armazenado ou compartilhado.
Sim — totalmente grátis, sem conta e sem limites.