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

[Canonical HTML page](https://gradiently.design/pt-br/guide/color-palette-generator)

Geradores são ótimos para produzir cinco amostras bonitas e péssimos para dizer o que fazer com elas. A parte útil acontece depois que você aperta o botão.

## The short version

- Um gerador de paleta de cores produz um conjunto de cores a partir de uma regra, de uma semente aleatória, de uma foto ou de um prompt de texto, mas não decide qual cor faz qual trabalho.
- A maioria das paletas geradas dá o mesmo peso e uma saturação parecida a todas as cores, o que fica bem nas amostras e barulhento num design real.
- Uma paleta usável precisa de um fundo claro ou escuro, de uma cor de tinta para o texto, de uma ou duas cores principais e de um pequeno destaque.
- Confira se a paleta cobre uma faixa ampla de luminosidade, porque cores com luminosidade parecida se confundem e falham nos testes de contraste.
- Sempre teste uma paleta gerada num layout real, com palavras reais, antes de adotá-la.

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.

| Tipo | Como funciona | Bom para | Cuidado com |
| --- | --- | --- | --- |
| Círculo de harmonias | Escolhe cores em ângulos fixos a partir de um matiz base: complementar, análoga, triádica | Aprender e construir em torno de uma cor que você já tem | Cinco cores com a mesma saturação, o que parece artificial |
| Aleatório com travas | Embaralha as cores; você trava as que gosta e embaralha de novo | Descobrir e quebrar um hábito | Combinações agradáveis sem nenhuma estrutura por trás |
| A partir de uma imagem | Captura as cores dominantes de uma foto | Combinar com um produto, um lugar ou a foto de uma campanha | Tons médios lamacentos e cores que não servem para texto |
| A partir de um prompt | Um modelo de IA sugere cores para palavras como padaria tranquila | Ideias rápidas para um clima ou um briefing de marca | Clichês populares e códigos que ninguém testou quanto ao contraste |

O Adobe Color é um círculo de harmonias conhecido; o Coolors é um gerador aleatório com travas conhecido. A maioria das ferramentas mistura várias abordagens.

Se você quer entender as regras por trás dos círculos de harmonias, leia [harmonia das cores](https://gradiently.design/pt-br/guide/color-harmony). Para o caminho da foto, [paleta de cores a partir de uma imagem](https://gradiently.design/pt-br/guide/color-palette-from-image) explica como escolher amostras melhores, e [geradores de paleta de cores com IA](https://gradiently.design/pt-br/guide/ai-color-palette-generator) 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.

- Vermelho: #e63946
- Amarelo: #f1c40f
- Verde: #2ecc71
- Azul: #3498db
- Roxo: #9b59b6

Como saiu do gerador: cinco matizes saturados de força parecida. Nada sobre o que ler texto, nada calmo e nada no comando.

- Fundo #f7f3ec: #f7f3ec
- Tinta #1c2321: #1c2321
- Verde-azulado principal #2a6f68: #2a6f68
- Sálvia de apoio #a8c5b8: #a8c5b8
- Coral de destaque #e07a5f: #e07a5f

Depois de editada: um fundo off-white quente, uma tinta quase preta (14,5:1 sobre o fundo), um verde-azulado que leva a cor do fundo como texto a 5,3:1, um apoio discreto e um único destaque.

## Cinco ajustes que tornam qualquer paleta gerada usável

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. **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. **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. **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. **Defina as proporções** Uma boa divisão inicial é a [regra 60 30 10](https://gradiently.design/pt-br/guide/60-30-10-rule): 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](https://gradiently.design/pt-br/guide/hsl-colors) é fácil de ler; o [OKLCH](https://gradiently.design/pt-br/guide/oklch-explained) 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](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

Um post retrato do Instagram anunciando um cardápio novo, numa família de cores calma com tipografia clara e legível

Uma paleta conquista seu lugar num formato real, com palavras reais. Se o título sofre aqui, mude a paleta, não o título.

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](https://gradiently.design/pt-br/guide/muddy-gradients).

A paleta editada como gradiente: `linear-gradient(160deg, #f7f3ec 0%, #a8c5b8 45%, #2a6f68 85%, #1c2321 100%)`

Do fundo à sálvia, ao verde-azulado e à tinta, sem nenhuma mancha cinza no caminho. O coral fica de fora, guardado para pequenos destaques.

## 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.

```css
: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);
}
```

Nomes de função sobrevivem a um rebranding. Uma variável chamada --teal, não.

## 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.

## FAQ

### Qual é o melhor gerador de paleta de cores?

Depende de como você trabalha: círculos de harmonias servem para construir em torno de uma cor, geradores aleatórios com travas servem para descobrir, e os que capturam imagens servem para combinar com uma foto. Todos precisam de edição depois.

### Quantas cores uma paleta deve ter?

A maioria das marcas funciona bem com um fundo, uma tinta, uma ou duas cores principais e um destaque, ou seja, quatro ou cinco no total. Mais do que isso é difícil de manter consistente.

### Por que minha paleta gerada fica feia no meu design?

Geralmente as cores têm luminosidade e saturação parecidas e nenhuma função clara. Acrescente um fundo neutro e uma cor de texto, espalhe a luminosidade e mantenha só um destaque vivo.

### Como verifico a acessibilidade de uma paleta?

Teste cada combinação de texto e fundo com um verificador de contraste, buscando pelo menos 4,5:1 para o texto corrido, e veja a paleta em tons de cinza para garantir que as cores se distinguem.