Gerador de paleta de cores: como chegar a paletas que funcionam

Um gerador de paleta de cores é uma ferramenta que sugere um conjunto de cores que ficam bem juntas, usando regras de teoria das cores, aleatoriedade, uma foto ou um prompt escrito. Use um para destravar e depois edite o resultado: acrescente um fundo neutro e uma cor de texto, dê uma função a cada cor e teste num design real. As cinco amostras do gerador são um ponto de partida. A paleta que funciona é a que você molda a partir delas.

Os principais tipos de gerador de paleta

Todo gerador faz, por baixo, uma de quatro coisas. Saber qual tipo você está usando mostra no que ele é bom e o que você vai ter que corrigir.

Se você quer entender as regras por trás dos círculos de harmonias, leia harmonia das cores. Para o caminho da foto, paleta de cores a partir de uma imagem explica como escolher amostras melhores, e geradores de paleta de cores com IA fala sobre prompts.

Por que paletas geradas costumam falhar em designs reais

Um gerador mostra as cores como cinco faixas iguais. Designs reais não são nada assim: uma cor cobre a maior parte do espaço, outra carrega as palavras e o resto aparece em pequenas quantidades. Aqui está um resultado aleatório típico ao lado da mesma ideia depois de editada.

Cinco ajustes que tornam qualquer paleta gerada usável

1. 1

   Fique com a única cor de que você realmente gosta

   Trave essa cor e trate como a principal. Todo o resto existe para apoiá-la. Se nada se destacar, gere de novo em vez de se conformar.

2. 2

   Acrescente um fundo e uma tinta

   Geradores raramente incluem os dois. Escolha um fundo claro (um off-white quente ou frio) ou escuro, e uma cor de tinta para o texto que contraste bem com ele. Puxe os dois levemente para a sua cor principal para que pertençam ao conjunto.

3. 3

   Espalhe a luminosidade

   Imagine as amostras em tons de cinza, ou converta na tela. Você quer valores claros, médios e escuros, não cinco tons médios. Ajuste a luminosidade até cada cor ficar claramente separada.

4. 4

   Reduza a saturação de todas menos uma

   Deixe o destaque vivo e acalme as outras. Uma cor de apoio mais suave que a principal faz a principal parecer mais rica.

5. 5

   Defina as proporções

   Uma boa divisão inicial é a regra 60 30 10: fundo em cerca de 60%, cor principal em cerca de 30%, destaque em cerca de 10%. Ajuste no olho quando vir tudo num layout.

Para fazer esses ajustes com precisão, trabalhe num formato de cor que separe luminosidade de matiz. O HSL é fácil de ler; o OKLCH mantém a luminosidade mais fiel entre matizes diferentes.

Teste a paleta num layout real

Amostras escondem problemas que aparecem assim que as palavras chegam. Coloque a paleta em algo que você faria de verdade, como um post, um cardápio ou uma seção hero, e olhe no tamanho em que as pessoas vão ver. Depois confira cada combinação de texto com um verificador de contraste.

Um gradiente é um teste extra rápido. Misture o fundo, a cor principal e a de apoio: se a mistura fica cinza no meio, duas das cores estão brigando, como explica gradientes lamacentos.

Salve como tokens, não como print

Quando a paleta funcionar, nomeie as cores pela função, não pelo matiz, para poder trocar o verde-azulado depois sem renomear tudo. No código isso significa variáveis CSS; nas ferramentas de design, estilos nomeados; no Gradiently, o kit de marca, onde paletas, fontes e tom de voz ficam juntos e o Designer os aplica ao que cria.

:root {
  --color-ground:  #f7f3ec;
  --color-ink:     #1c2321;
  --color-main:    #2a6f68;
  --color-support: #a8c5b8;
  --color-accent:  #e07a5f;
}

.button {
  background: var(--color-main);
  color: var(--color-ground);
}

Buscar por cor em vez de gerar

Às vezes o que você quer de verdade não são cinco códigos, mas um fundo pronto numa família de cores. O Mercado do Gradiently permite buscar Marks por palavras de cor como “verde-azulado profundo” ou “pêssego quente” e filtrar pelo visual. Cada Mark é um fundo vivo de gradiente e material, com sua própria paleta e voz tipográfica, comparado com todos os outros para que não existam dois iguais, e você pode criar com qualquer um ainda não reservado de graça. É outro caminho para o mesmo objetivo: cores que combinam, já cumprindo suas funções.