Gerador de paleta de cores – Esquemas e variáveis CSS
Monte um conjunto harmonioso de cinco cores a partir de uma cor base ou aleatoriamente. Trave as que gostar, gere o resto de novo e copie códigos HEX ou variáveis CSS.
Escolha uma cor base e um esquema — complementar, análogo, triádico, tetrádico, complementar dividido, monocromático ou tons — ou escolha Aleatório. Aperte Espaço ou Gerar para novas ideias, trave as cores que quer manter e clique numa amostra para copiar o HEX. As variáveis CSS ficam prontas para colar.
Como usar: Gerador de paleta de cores
- Escolha uma cor base, por exemplo a cor da sua marca.
- Escolha um esquema de cores.
- Aperte Espaço ou clique em Gerar para ver variações.
- Trave as cores de que gostar com o cadeado.
- Clique numa amostra para copiar o HEX, ou copie as variáveis CSS.
Como funcionam os esquemas de cores
Harmonias de cores se baseiam em posições no círculo cromático. O gerador gira o matiz da cor base e ajusta luminosidade e saturação para as cinco cores combinarem.
| Esquema | Regra | Sensação |
|---|---|---|
| Complementar | matiz oposto (180°) | contraste forte, energia |
| Análogo | vizinhos (±30°) | calmo, natural |
| Triádico | três matizes a 120° | vivo, mas equilibrado |
| Tetrádico | dois pares complementares | rico, precisa de uma cor dominante |
| Complementar dividido | base + dois matizes ao lado do oposto | contraste com menos tensão |
| Monocromático | um matiz, luminosidades diferentes | limpo, elegante |
"Tons" cria uma escala do claro ao escuro de uma cor, útil para botões, bordas e estados de hover. "Aleatório" ignora a cor base e sugere combinações agradáveis.
A regra 60-30-10
Uma paleta fica mais fácil de usar quando cada cor tem uma função. Use uma cor em cerca de 60 % do design (fundos), outra em 30 % (cards, seções) e um destaque em 10 % (botões, links). As demais servem para hover, bordas ou gráficos.
Contraste e acessibilidade
Cada amostra mostra o texto em preto ou branco, o que ficar mais legível. Pelas diretrizes WCAG, texto comum deve ter contraste de pelo menos 4,5:1 com o fundo. Confira seus pares finais de texto e fundo num verificador de contraste e converta HEX em RGB com a ferramenta Converter HEX para RGB.
Da paleta ao código
A caixa de CSS lista as cores como propriedades personalizadas, como --color-1. Cole no seu CSS e use var(--color-1) onde quiser. Depois de decidir a função de cada uma, renomeie para --primaria ou --destaque.
Dicas
- Comece pelo seu logo ou por uma foto de produto e use a cor principal como base.
- Trave uma cor que você adora e gere de novo até o resto combinar.
- Evite preto e branco puros; tons muito escuros e muito claros ficam mais suaves.
- Teste a paleta num layout real antes de decidir.
Tudo roda no seu navegador. Vai criar um ícone com as novas cores? Experimente o Gerador de favicon.
Você também pode gostar destas ferramentas grátis: Formatador JSON, Gerador de senha e Testador de regex.
Perguntas frequentes
Como gero uma paleta de cores?
Escolha uma cor base e um esquema e aperte Espaço ou clique em Gerar. Trave as cores de que gostar e gere as outras de novo.
O que é um esquema complementar?
Usa cores opostas no círculo cromático, como azul e laranja, para um contraste forte.
Como copio uma cor?
Clique numa amostra para copiar o HEX, ou copie todas as cores como variáveis CSS.
Posso manter algumas cores fixas?
Sim. Clique no cadeado da amostra; cores travadas continuam quando você gera novas.
As paletas são acessíveis?
A ferramenta mostra cores de texto legíveis, mas sempre confira se seus pares de texto e fundo chegam a 4,5:1.
Última atualização: