Gerador de Paleta de Cores

Como Criar uma Paleta de Cores

Uma paleta de cores é o pequeno conjunto de cores que uma marca, um site ou um projeto usa sempre, com uma ordem de importância clara. Este gerador de paleta de cores permite criar uma paleta de cores online, grátis, a partir do ponto em que já está: uma cor da marca, uma fotografia ou apenas uma harmonia. Tudo corre no seu browser: nenhuma cor, fotografia ou ficheiro é enviado para um servidor.

A Partir de uma Cor

Se já tem uma cor de marca, escreva o código HEX no campo «Cor base» (por exemplo #B08C4F) ou escolha-a no seletor ao lado. O gerador lê o matiz, a saturação e a luminosidade dessa cor e constrói o resto da paleta à volta dela, segundo a harmonia escolhida. A cor base entra sempre na paleta, por isso o resultado já conversa com o logótipo que tem. Carregue em Gerar, ou na barra de espaços, para ver outras variações com a mesma base; para voltar às paletas aleatórias, apague o campo.

A Partir de uma Imagem

O botão «Foto» extrai as cores dominantes de uma fotografia: um produto, a montra da loja, uma imagem de campanha ou um feed que admira. A imagem é reduzida e analisada no próprio browser com um algoritmo de corte pela mediana (median cut), que divide os píxeis em grupos até chegar ao número de cores da paleta e devolve a média de cada grupo. Resulta melhor com fotografias de poucas zonas de cor bem definidas; uma imagem muito variada dá cores mais acinzentadas, porque cada grupo mistura tons diferentes. Precisa de uma cor exata de um ponto, e não das dominantes? Use o identificador de cores: a lupa lê o código de cada píxel e as cores que fixar lá voltam para aqui com «Abrir como paleta».

Por Harmonia

As harmonias são regras de posição no círculo cromático. No menu de harmonia escolha Análoga (cores vizinhas), Complementar (cores opostas), Tríade (três cores a 120 graus), Monocromática (um só matiz em várias luminosidades), Quentes ou Frias; a opção Automática mistura matizes com mais liberdade. Bloqueie com o cadeado as cores de que gosta e volte a gerar: só as desbloqueadas mudam. Pode arrastar as colunas para reordenar, inserir uma cor entre duas e remover as que sobram, entre 2 e 10 cores. Para ver estas relações desenhadas, use o círculo cromático interativo.

Partilhar, Exportar e Verificar o Contraste

O endereço da página muda a cada paleta, com os códigos HEX no fim do link. Basta carregar em «Partilhar» e enviar o link a quem precisa de ver exatamente as mesmas cores. «Exportar» entrega a paleta em variáveis CSS, variáveis SCSS, um bloco para o theme.extend.colors do Tailwind, JSON ou imagem PNG, com o nome português de cada cor já no nome da variável. «Contraste» abre a grelha de todos os pares de fundo e texto, com o rácio e o nível WCAG de cada um.

Que Cores Ficam Bem Juntas?

Não há uma lista fechada, mas há relações que funcionam quase sempre, porque dão ao olho um contraste claro ou uma transição previsível. As quatro abaixo cobrem a maior parte das paletas de marca e de site. Em qualquer delas, a primeira decisão é qual das cores manda e quais só apoiam.

Complementares: Contraste Forte

São cores opostas no círculo, como azul e laranja, verde e vermelho ou violeta e amarelo. Juntas vibram, por isso funcionam melhor quando uma domina e a outra aparece pouco, em botões, preços ou destaques. Exemplo: um azul-petróleo #1F5F6B como cor principal e um terracota #C4663F reservado para as chamadas à ação.

Análogas: Transições Suaves

São três a cinco cores vizinhas, por exemplo do verde ao azul. Dão uma paleta calma e coerente, frequente em marcas de natureza, saúde ou bem-estar. O risco é a falta de contraste: como os matizes são parecidos, a diferença tem de vir da luminosidade. Exemplo: #0F3D3E, #2E8B7A e #9ED9C4, do escuro para o claro, com o mais escuro reservado para texto.

Tríade: Equilíbrio com Energia

A tríade usa três matizes à mesma distância, a 120 graus uns dos outros. É mais viva do que a análoga e mais equilibrada do que a complementar, mas três cores saturadas lado a lado cansam depressa. A solução habitual é baixar a saturação de duas delas, ou usar uma como principal e as outras em pequenas doses. Exemplo: #296A99, #B2387F e #739B3B.

Neutros: o Que Segura a Paleta

Branco, preto, cinzentos, bege e castanhos claros quase não têm matiz, por isso combinam com praticamente tudo e dão descanso às cores fortes. Numa paleta de marca costumam ocupar a maior parte da superfície: fundos, texto e linhas. Uma regra prática muito usada em decoração e design é a 60-30-10: cerca de 60% para a cor dominante (muitas vezes um neutro), 30% para a secundária e 10% para o acento. Exemplo: #141210, #9A917F e #FAF9F6, com um dourado #B08C4F de acento.

Paleta de Cores para Marca e para Site

Uma paleta de marca não é a lista de todas as cores de que gosta. É um sistema pequeno, com um papel para cada cor, que se repete igual no site, nas redes sociais, na papelaria e na sinalética.

Quantas Cores Deve Ter

Para a maioria das marcas chegam três a cinco cores: uma principal, uma ou duas de apoio e dois neutros para fundo e texto. Uma paleta de 3 cores (principal, neutro escuro e neutro claro) é suficiente para um negócio pequeno e é mais fácil de manter coerente. Acima de cinco, as cores extra tendem a aparecer só em peças soltas e a consistência perde-se. É por isso que o gerador começa com cinco.

Os Papéis de Cada Cor

• Primária: a cor da marca, a que aparece no logótipo e nos elementos principais.
• Secundária: apoia a primária em ilustrações, secções e gráficos.
• Acento: a cor dos botões e das chamadas à ação, usada em pouca quantidade para se destacar.
• Neutros: um escuro para texto, um claro para fundos e, se precisar, um cinzento intermédio para linhas e texto secundário.

Com a paleta fechada, o botão «Manual» leva as cores e os nomes diretamente para o gerador de manual de identidade, onde junta o logótipo, a tipografia e o tom de voz numa página em PDF. Se ainda não tem logótipo, o criador de logótipos dá ideias para começar, e a tabela de cores mostra cada cor em HEX, RGB, CMYK e HSL, os códigos que a gráfica e o programador vão pedir.

Contraste do Texto e as Regras WCAG

As WCAG (Web Content Accessibility Guidelines), do W3C, pedem no nível AA um rácio de contraste mínimo de 4,5:1 entre texto normal e fundo, e de 3:1 para texto grande (a partir de 24 px, ou 18,66 px em negrito). O nível AAA sobe para 7:1 e 4,5:1, respetivamente. Contornos de campos, ícones e outros componentes de interface precisam de 3:1. Em Portugal, os sites das entidades públicas têm de cumprir o nível AA, nos termos do Decreto-Lei n.º 83/2018. Neste gerador, cada cor mostra o rácio do texto escrito por cima dela, e o botão «Contraste» mostra a grelha completa: fica logo claro que pares servem para texto e quais ficam para superfícies e decoração.

Paletas de Cores Prontas a Usar

Oito combinações para começar. Cada uma abre no gerador com um clique, onde pode bloquear as cores que quer manter e gerar o resto, ou levá-la tal como está para o manual de identidade.

Perguntas Frequentes