A versão curta
- Uma paleta de marca que funciona tem quatro ou cinco cores com funções fixas: um fundo, uma cor principal, um tom de apoio, um neutro para o texto e um destaque.
- O destaque é a cor de que as pessoas se lembram, por isso deve aparecer numa coisa de cada vez, como um botão, um preço ou o símbolo do logótipo.
- As paletas adequadas a um setor ajudam os clientes a perceber o que vendes, mas é uma única cor inesperada que torna uma marca reconhecível.
- Testa uma paleta em designs reais, a tamanhos reais, em claro e escuro, antes de te comprometeres, porque amostras numa página branca escondem a maioria dos problemas.
- Confirma que a cor do texto sobre o fundo cumpre o contraste WCAG, ou o texto corrido será difícil de ler para muita gente.
Nesta página
Boas ideias de cores de marca começam pelas funções, não pelos favoritos. Escolhe um fundo onde assenta a maioria dos teus designs, uma cor principal que diga que tipo de negócio és, um tom de apoio para dar profundidade, um neutro para o texto e um destaque pelo qual as pessoas se lembrem de ti. Abaixo ficam 30 paletas construídas assim, seis por ambiente com amostras e 24 por setor com códigos, mais um método rápido para testar a que escolheres.
Como se constrói uma paleta de cores de marca
A maioria das paletas falhadas são cinco cores com o mesmo peso: nada lidera, por isso nada é reconhecível. Uma paleta funciona quando cada cor tem uma parte do espaço: o fundo cobre a maior parte, a cor principal uma boa parte e o destaque apenas uma nesga. A regra 60 30 10 é uma boa proporção de partida, mesmo que a dobres mais tarde.
Papel
Parte de um design
Papel
Papel
Papel
Papel
Paletas de cores de marca por ambiente
Começa aqui se sabes o que queres que as pessoas sintam. As associações de cor são culturais e não universais, como explica a psicologia das cores.
Ideias de cores de marca por setor
Cada paleta de setor lista quatro códigos, normalmente do mais escuro ao mais claro, e a última coluna indica a cor que faz de destaque. As convenções existem por uma razão: um dentista em verde-azulado e uma pastelaria em castanhos quentes percebem-se num relance. Respeita a convenção com a cor principal e quebra-a com delicadeza no destaque.
Paleta
Códigos
#1d3557 #457b9d #f1faee #e63946Porque funciona
Paleta
Códigos
#2b2d42 #8d99ae #edf2f4 #9c6644Porque funciona
Códigos
#03363d #17a398 #e6f4f1 #ffb703Porque funciona
Paleta
Códigos
#264653 #2a9d8f #e9f5f2 #f4a261Porque funciona
Códigos
#4a2c2a #c08552 #f3e9dc #5e8b7ePorque funciona
Paleta
Códigos
#7f4f24 #dda15e #fefae0 #bc4749Porque funciona
Paleta
Códigos
#1b1b1e #7a1e2c #d4a373 #f5ebe0Porque funciona
Códigos
#2d4a3e #e5989b #ffcdb2 #fffaf5Porque funciona
Paleta
Códigos
#5e548e #9f86c0 #e0b1cb #fbf8f3Porque funciona
Códigos
#111111 #3a3a3a #f2f2f2 #e4ff1aPorque funciona
Paleta
Códigos
#6b4e3d #e8b4a0 #f6e3d8 #fdf8f4Porque funciona
Paleta
Códigos
#0f0f0f #c9c1b6 #f4f1ec #8a1c1cPorque funciona
Paleta
Códigos
#14213d #2e1a47 #f5f0e6 #c9a227Porque funciona
Paleta
Códigos
#22333b #5e503f #eae0d5 #c6ac8fPorque funciona
Paleta
Códigos
#262626 #7d7d7d #d9d9d9 #ff5a1fPorque funciona
Paleta
Códigos
#0b1021 #1f6feb #e6edf3 #7ee787Porque funciona
Códigos
#0a2e2a #00b37e #d7f9ec #1e1e24Porque funciona
Paleta
Códigos
#0e0b16 #5b5bd6 #a78bfa #f0abfcPorque funciona
Códigos
#1a1423 #ff7b54 #ffb26b #ffd56bPorque funciona
Paleta
Códigos
#118ab2 #06d6a0 #ffd166 #ef476fPorque funciona
Paleta
Códigos
#2f3e46 #52796f #cad2c5 #f4a259Porque funciona
Paleta
Códigos
#283618 #606c38 #fefae0 #dd6b20Porque funciona
Paleta
Códigos
#6d597a #b56576 #e8c2ca #fbf6f0Porque funciona
Paleta
Códigos
#090014 #3c096c #ff006e #fb5607Porque funciona
Como fazer uma paleta parecer a tua marca
O que transforma uma paleta de lista numa identidade é uma decisão que mais ninguém na tua rua tomou, normalmente o destaque: um escritório de advogados em castanho-couro, um ginásio em amarelo ácido. Muda primeiro o destaque e mantém o fundo e a cor do texto, para ganhares personalidade sem perder legibilidade.
Evita
- Cinco cores vivas usadas por igual
- Escolher primeiro a cor do logótipo e as outras a olho
- Um destaque em cada elemento de cada design
- Texto cinzento-claro sobre um fundo creme
- Escolher a partir de amostras numa página branca
Faz
- Um fundo que cobre a maior parte do espaço
- Primeiro as funções, depois as cores que as preenchem
- Uma coisa em destaque por design
- Um neutro escuro que cumpre o contraste
- Testar numa publicação, num story e num banner reais
Uma paleta misturada num gradiente suave dá-te um fundo inconfundivelmente teu, desde que as cores sejam aparentadas.
Testa as cores da tua marca antes de te comprometeres
- 1
Faz três designs reais
Uma publicação quadrada, um story de 1080×1920 e um cabeçalho de 1500×500, com palavras verdadeiras e o teu logótipo.
- 2
Verifica o contraste do texto
O teu neutro sobre o teu fundo deve cumprir o WCAG AA. Contraste de cor e acessibilidade mostra como o medir.
- 3
Olha para ele em pequeno
Reduz a publicação ao tamanho de miniatura. Se ainda perceberes que é tua, a paleta está a cumprir a sua função.
- 4
Experimenta ao lado dos concorrentes
Põe a tua publicação ao lado de três rivais locais. Se a tua se confundir com elas, muda o destaque, não a paleta inteira.
- 5
Escreve os códigos
Regista cada código hex e a sua função num só lugar.
Testar uma paleta numa publicação real: o título, o detalhe e o fundo têm de funcionar em conjunto a 1080×1350.
Se quiseres ajuda para escolher, como escolher as cores da marca percorre a decisão desde o início, e as combinações de cores para logótipos reduzem-na às duas ou três cores que o próprio símbolo deve usar.
Transformar as cores da marca num visual
Cinco códigos hex qualquer pessoa os copia. Na Gradiently, um Mark leva uma paleta como fundo vivo, com luz, grão e movimento próprios, e não há dois Marks iguais. Pesquisa no Mercado com palavras de cor como “verde-azulado profundo” para encontrar um próximo da tua paleta, cria com ele de graça e reserva-o para que só tu possas exportar com ele. O teu kit de marca guarda os códigos exatos para texto e destaques.
Perguntas frequentes
Quantas cores deve ter uma marca?
Quatro ou cinco chegam para a maioria das marcas: um fundo, uma cor principal, um tom de apoio, um neutro para o texto e um destaque. Mais do que isso é difícil de usar com consistência.
Qual é a melhor cor para uma marca nova?
Não há uma melhor cor. Escolhe uma cor principal que condiga com o que vendes e depois um destaque que os teus concorrentes não usem, para os clientes te distinguirem.
As cores da minha marca devem corresponder ao meu setor?
Acompanhar o setor com a cor principal ajuda as pessoas a perceber-te depressa. Quebrá-lo com o destaque é o que te torna memorável.
Como verifico se as cores da minha marca são acessíveis?
Mede o contraste da cor do texto sobre o fundo com um verificador de contraste WCAG. O texto corrido deve atingir pelo menos 4,5:1.
Posso usar um gradiente como cor de marca?
Sim, desde que seja feito de cores aparentadas da tua paleta e mantenhas uma versão lisa para usos pequenos, como favicons e texto.
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