A versão curta
- Um gerador de paletas de cores produz um conjunto de cores a partir de uma regra, de uma semente aleatória, de uma fotografia ou de uma descrição, mas não decide que cor faz que função.
- A maioria das paletas geradas dá a todas as cores o mesmo peso e uma saturação parecida, o que fica bem como amostras e ruidoso num design real.
- Uma paleta utilizável precisa de um fundo claro ou escuro, uma cor de tinta para o texto, uma ou duas cores principais e um pequeno destaque.
- Verifica se a paleta abrange uma ampla gama de luminosidade, porque cores de luminosidade parecida esbatem-se umas nas outras e falham nas verificações de contraste.
- Testa sempre uma paleta gerada num layout real, com palavras reais, antes de te comprometeres com ela.
Nesta página
Um gerador de paletas de cores é uma ferramenta que sugere um conjunto de cores que ficam bem juntas, usando regras da teoria da cor, aleatoriedade, uma fotografia ou uma descrição escrita. Usa um para desbloquear, depois edita o resultado: acrescenta um fundo neutro e uma cor de texto, dá uma função a cada cor e testa num design real. As cinco amostras do gerador são um ponto de partida. A paleta que funciona é a que moldas a partir delas.
Os principais tipos de gerador de paletas
Todos os geradores fazem uma de quatro coisas por dentro. Saber que tipo estás a usar diz-te no que é bom e o que vais ter de corrigir.
Como funciona
Bom para
Atenção a
Como funciona
Bom para
Atenção a
Como funciona
Bom para
Atenção a
Como funciona
Bom para
Atenção a
Se queres perceber as regras por trás das rodas de harmonias, lê harmonia de cores. Para a abordagem por fotografia, paleta de cores a partir de uma imagem explica como escolher melhores amostras, e geradores de paletas de cores com IA trata de como pedir.
Porque é que as paletas geradas muitas vezes falham em designs reais
Um gerador mostra as cores como cinco faixas iguais. Os designs reais não são nada assim: uma cor cobre a maior parte do espaço, uma leva as palavras e as restantes aparecem em pequenas quantidades. Eis um resultado aleatório típico ao lado da mesma ideia depois de editada.
Cinco ajustes que tornam utilizável qualquer paleta gerada
- 1
Guarda a única cor de que realmente gostas
Bloqueia-a e trata-a como a cor principal. Tudo o resto existe para a apoiar. Se nada se destacar, gera outra vez em vez de te contentares.
- 2
Acrescenta um fundo e uma tinta
Os geradores raramente os incluem. Escolhe um fundo claro (um branco-sujo quente ou frio) ou escuro e uma cor de tinta para o texto que contraste fortemente com ele. Tinge ambos ligeiramente para a tua cor principal para pertencerem.
- 3
Distribui a luminosidade
Passa as amostras a cinzento na cabeça ou no ecrã. Queres valores claros, médios e escuros, e não cinco médios. Ajusta a luminosidade até cada cor ficar claramente separada.
- 4
Baixa a saturação de todas menos uma
Deixa o destaque vibrante e acalma as outras. Uma cor de apoio mais suave do que a principal faz a principal parecer mais rica.
- 5
Atribui proporções
Uma boa divisão de partida é a regra 60 30 10: fundo cerca de 60%, cor principal cerca de 30%, destaque cerca de 10%. Ajusta a olho quando vires num layout.
Para fazer estes ajustes com precisão, trabalha num formato de cor que separe a luminosidade do tom. O HSL lê-se facilmente; o OKLCH é melhor a manter a luminosidade honesta entre tons diferentes.
Testa a paleta num layout real
As amostras escondem problemas que surgem assim que chegam as palavras. Põe a tua paleta em algo que farias mesmo, como uma publicação, um menu ou uma secção de abertura, e olha para ela ao tamanho a que as pessoas a vão ver. Depois verifica cada par de texto com um verificador de contraste.
Uma paleta ganha o seu lugar num formato real com palavras reais. Se o título tem dificuldades aqui, muda a paleta e não o título.
Um gradiente é um teste extra rápido. Mistura o fundo, a cor principal e a de apoio: se a mistura ficar cinzenta a meio, duas das cores estão a lutar, o que se explica em gradientes enlameados.
linear-gradient(160deg, #f7f3ec 0%, #a8c5b8 45%, #2a6f68 85%, #1c2321 100%)Guarda-a como tokens, não como captura de ecrã
Quando a paleta funcionar, dá às cores nomes pela função e não pelo tom, para poderes mudar o verde-azulado mais tarde sem renomear tudo. Em código isso são variáveis CSS; em ferramentas de design são estilos com nome; no Gradiently é o kit de marca, onde paletas, tipos de letra e voz vivem 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);
}Pesquisar por cor em vez de gerar
Às vezes o que queres não são cinco códigos, mas um fundo acabado numa família de cores. O Mercado do Gradiently deixa-te pesquisar Marks por palavras de cor como «verde-azulado profundo» ou «pêssego quente» e filtrar por aspeto. Cada Mark é um fundo vivo de gradiente e material com a sua própria paleta e voz tipográfica, comparado com todos os outros para que nenhum se pareça com outro, e podes desenhar com qualquer Mark livre de graça. É um caminho diferente para o mesmo objetivo: cores que combinam, já a cumprir as suas funções.
Perguntas frequentes
Qual é o melhor gerador de paletas de cores?
Depende de como trabalhas: as rodas de harmonias servem para construir em torno de uma cor, os geradores aleatórios com bloqueios servem para descobrir e os recolhedores de imagens servem para combinar com uma fotografia. Todos precisam de edição depois.
Quantas cores deve ter uma paleta?
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 coerente.
Porque é que a minha paleta gerada fica mal no meu design?
Normalmente as cores têm luminosidade e saturação parecidas e nenhuma função clara. Acrescenta um fundo neutro e uma cor de texto, distribui a luminosidade e guarda só um destaque vibrante.
Como verifico a acessibilidade de uma paleta?
Testa cada par de texto e fundo com um verificador de contraste, visando pelo menos 4,5:1 para o texto corrido, e vê a paleta em escala de cinzentos para garantir que as cores são distintas.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil