Como usar o gerador de paletas
O gerador monta 5 cores de cada vez. O fluxo de trabalho é simples e rápido:
- Gerar: pressione a barra de espaço ou clique no botão de gerar para ver uma nova combinação. Gere várias em sequência até algo chamar sua atenção.
- Travar: gostou de uma cor? Clique no cadeado dela. As próximas gerações mantêm as cores travadas e recalculam só as outras, então você constrói a paleta aos poucos.
- Partir de uma cor sua: informe a cor da sua marca no campo de cor base. A regra de harmonia escolhida passa a ser calculada a partir dela.
- Copiar: cada cor mostra o código HEX e o nome de cor mais próximo. Clique na cor para copiar o HEX.
- Compartilhar: a URL é atualizada com as cores atuais, no formato
?c=hex-hex-hex-hex-hex. Copie o endereço e mande para o cliente ou a equipe: quem abrir verá exatamente a mesma paleta.
As regras de harmonia
As regras usam as relações de posição no círculo cromático, medidas pelo matiz (o H do HSL, de 0° a 360°). Cada uma produz um tipo de efeito:
| Regra | Como é calculada | Efeito |
|---|---|---|
| Aleatória equilibrada | Cores variadas, sem relação fixa de matiz, escolhidas para formar um conjunto equilibrado | Boa para explorar sem ideia prévia |
| Análoga | Matizes vizinhos no círculo, com cerca de 30° de distância | Calma e coesa, comum em natureza e fotografia |
| Complementar | A cor base e a oposta, a 180° | Contraste máximo de matiz, ótima para destacar uma ação |
| Tríade | Três matizes a 120° um do outro | Vibrante e equilibrada |
| Tetrádica | Quatro matizes a 90° um do outro, formando dois pares complementares | Rica, mas pede que uma cor domine |
| Complementar dividida | A base e as duas vizinhas da sua complementar, a 150° e 210° | Contraste forte com menos tensão que a complementar |
| Monocromática | Um só matiz, variando saturação e luminosidade | Sóbria e elegante, fácil de aplicar |
As regras são um ponto de partida, não uma garantia de bom resultado: duas cores complementares com a mesma luminosidade vibram de forma desconfortável lado a lado, por exemplo. O guia de harmonia das cores explica cada esquema com exemplos e mostra como ajustar a proporção entre as cores.
Como aplicar uma paleta de 5 cores num site
Uma paleta gerada tem 5 cores com peso visual parecido, mas um site precisa de hierarquia. A regra 60-30-10 é um bom ponto de partida:
- 60% para a cor dominante: em interfaces, quase sempre um neutro claro (ou escuro, no modo escuro) para os fundos. Se a paleta não tem nenhum neutro, derive um: pegue a cor mais clara e reduza bastante a saturação, ou use algo como off-white.
- 30% para a cor secundária: cabeçalho, rodapé, cartões, seções alternadas.
- 10% para a cor de ação: botões principais, links e destaques. Escolha a cor mais saturada da paleta e use-a com parcimônia, para que ela continue chamando atenção.
As duas cores restantes podem virar variações de apoio, como o estado de hover do botão ou a cor de um selo. Para texto, use um tom bem escuro derivado da paleta em vez do preto puro, como cinza-chumbo. O guia como montar a paleta de cores de um site detalha os papéis de cada cor, incluindo as cores de estado (erro, alerta, sucesso).
Confira a acessibilidade antes de publicar
Uma paleta bonita pode ser ilegível. As WCAG pedem contraste mínimo de 4,5:1 para texto normal e de 3:1 para texto grande e para componentes de interface, como bordas de campo e ícones. Cores médias e saturadas, justamente as que o gerador costuma produzir, raramente passam como cor de texto sobre fundo branco.
Antes de usar a paleta, teste cada par de texto e fundo no verificador de contraste. Se uma combinação falhar, escureça ou clareie a cor mantendo o matiz: a paleta preserva a identidade e passa a ser legível. Lembre também que parte do público tem daltonismo; o simulador de daltonismo mostra se as cores continuam distinguíveis.
Exportar para o código
Quando a paleta estiver pronta, exporte em um destes formatos:
- Variáveis CSS: cinco propriedades personalizadas, de
--color-1a--color-5, prontas para colar no seu CSS. - Tailwind: um trecho para
theme.extend.colorsno arquivo de configuração, que cria classes comobg-etext-com as suas cores. - JSON: a lista de cores, útil para tokens de design, scripts ou outras ferramentas.
Um exemplo de uso das variáveis CSS, já com papéis definidos:
:root {
--color-1: #264653;
--color-2: #2A9D8F;
--color-3: #E9C46A;
--color-4: #F4A261;
--color-5: #E76F51;
}
body { background: #FAF9F6; color: var(--color-1); }
.button { background: var(--color-5); color: #000000; }
.card { border-top: 4px solid var(--color-2); }Uma boa prática é renomear as variáveis pelo papel que cumprem, como --color-primary ou --color-surface, em vez de pela posição. Assim, trocar a paleta no futuro não exige mexer em cada componente. Repare no texto do botão: o branco sobre #E76F51 alcança só cerca de 3,1:1, abaixo dos 4,5:1 exigidos para texto normal, por isso o exemplo usa texto preto. A outra opção é escurecer o coral.