Resumindo
- 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 acento.
- O acento é a cor de que as pessoas se lembram, então ele deve aparecer em uma coisa por vez, como um botão, um preço ou o símbolo do logo.
- Paletas que combinam com um segmento ajudam o cliente a entender o que você vende, mas é uma única cor inesperada que torna uma marca reconhecível.
- Teste uma paleta em designs reais, em tamanhos reais, no claro e no escuro, antes de decidir, porque amostras numa página branca escondem a maioria dos problemas.
- Confira se a cor do texto sobre o fundo atende ao contraste WCAG, senão o texto corrido vai ser difícil de ler para muita gente.
Nesta página
Boas ideias de cores para marca começam pelas funções, não pelas favoritas. Escolha uma cor de fundo sobre a qual a maioria dos seus designs vai ficar, uma cor principal que diga que tipo de negócio você é, um tom de apoio para dar profundidade, um neutro para o texto e um acento pelo qual as pessoas vão lembrar de você. Abaixo estão 30 paletas montadas assim, seis por clima com amostras e 24 por segmento com códigos, mais um método rápido para testar a que você escolher.
Como uma paleta de cores de marca é montada
A maioria das paletas que falham são cinco cores com o mesmo peso: nenhuma lidera, então nenhuma é reconhecível. Uma paleta funciona quando cada cor tem uma parte do espaço: o fundo cobre quase tudo, a cor principal uma boa parte e o acento só uma lasca. A regra 60 30 10 é uma proporção inicial útil, mesmo que você a dobre depois.
Tarefa
Parte do design
Tarefa
Tarefa
Tarefa
Tarefa
Paletas de cores de marca por clima
Comece por aqui se você sabe como quer que as pessoas se sintam. As associações de cor são culturais, não universais, como explica a psicologia das cores.
Ideias de cores para marca por segmento
Cada paleta por segmento lista quatro códigos, normalmente do mais escuro para o mais claro, e a última coluna diz qual cor faz o papel de acento. As convenções existem por um motivo: um dentista em verde-azulado e uma padaria em marrons quentes são entendidos de relance. Siga a convenção com a cor principal e quebre-a com delicadeza no acento.
Códigos
#1d3557 #457b9d #f1faee #e63946Por que funciona
Paleta
Códigos
#2b2d42 #8d99ae #edf2f4 #9c6644Por que funciona
Códigos
#03363d #17a398 #e6f4f1 #ffb703Por que funciona
Paleta
Códigos
#264653 #2a9d8f #e9f5f2 #f4a261Por que funciona
Códigos
#4a2c2a #c08552 #f3e9dc #5e8b7ePor que funciona
Códigos
#7f4f24 #dda15e #fefae0 #bc4749Por que funciona
Paleta
Códigos
#1b1b1e #7a1e2c #d4a373 #f5ebe0Por que funciona
Paleta
Códigos
#2d4a3e #e5989b #ffcdb2 #fffaf5Por que funciona
Paleta
Códigos
#5e548e #9f86c0 #e0b1cb #fbf8f3Por que funciona
Códigos
#111111 #3a3a3a #f2f2f2 #e4ff1aPor que funciona
Códigos
#6b4e3d #e8b4a0 #f6e3d8 #fdf8f4Por que funciona
Paleta
Códigos
#0f0f0f #c9c1b6 #f4f1ec #8a1c1cPor que funciona
Paleta
Códigos
#14213d #2e1a47 #f5f0e6 #c9a227Por que funciona
Paleta
Códigos
#22333b #5e503f #eae0d5 #c6ac8fPor que funciona
Paleta
Códigos
#262626 #7d7d7d #d9d9d9 #ff5a1fPor que funciona
Paleta
Códigos
#0b1021 #1f6feb #e6edf3 #7ee787Por que funciona
Códigos
#0a2e2a #00b37e #d7f9ec #1e1e24Por que funciona
Paleta
Códigos
#0e0b16 #5b5bd6 #a78bfa #f0abfcPor que funciona
Códigos
#1a1423 #ff7b54 #ffb26b #ffd56bPor que funciona
Paleta
Códigos
#118ab2 #06d6a0 #ffd166 #ef476fPor que funciona
Códigos
#2f3e46 #52796f #cad2c5 #f4a259Por que funciona
Paleta
Códigos
#283618 #606c38 #fefae0 #dd6b20Por que funciona
Paleta
Códigos
#6d597a #b56576 #e8c2ca #fbf6f0Por que funciona
Paleta
Códigos
#090014 #3c096c #ff006e #fb5607Por que funciona
Como fazer uma paleta parecer a sua marca
O que transforma uma paleta de lista numa identidade é uma decisão que ninguém mais da sua rua tomou, normalmente o acento: um escritório de advocacia em marrom couro, uma academia em amarelo ácido. Mude o acento primeiro e mantenha o fundo e a cor do texto, assim você ganha um visual sem perder legibilidade.
Evite
- Cinco cores vibrantes usadas por igual
- Escolher primeiro a cor do logo e o resto no olho
- Um acento em todos os elementos de todos os designs
- Texto cinza-claro sobre fundo creme
- Escolher a partir de amostras numa página branca
Faça
- Um fundo que cobre a maior parte do espaço
- Funções primeiro, depois as cores para preenchê-las
- Uma coisa com acento por design
- Um neutro escuro que passa no contraste
- Testar num post, num story e num banner reais
Uma paleta misturada num degradê suave dá a você um fundo inconfundivelmente seu, desde que as cores sejam aparentadas.
Teste as cores da sua marca antes de decidir
- 1
Faça três designs reais
Um post quadrado, um story de 1080×1920 e um cabeçalho de 1500×500, com palavras reais e o seu logo.
- 2
Confira o contraste do texto
O seu neutro sobre o seu fundo deve passar no WCAG AA. Contraste de cores e acessibilidade mostra como medir.
- 3
Olhe em tamanho pequeno
Reduza o post ao tamanho de uma miniatura. Se ainda dá para saber que é seu, a paleta está cumprindo o papel.
- 4
Compare com concorrentes
Coloque o seu post ao lado de três concorrentes locais. Se o seu se perde, mude o acento, não a paleta inteira.
- 5
Anote os códigos
Registre cada código hex e sua função num só lugar.
Testando uma paleta num post de verdade: o título, o detalhe e o fundo precisam funcionar juntos em 1080×1350.
Se você quer ajuda para escolher, como escolher as cores da marca percorre a decisão do zero, e combinações de cores para logo reduz a escolha às duas ou três cores que o próprio símbolo deve usar.
Como transformar as cores da marca num visual
Cinco códigos hex podem ser copiados por qualquer um. No Gradiently, um Mark leva uma paleta como um fundo vivo, com luz, grão e movimento próprios, e não existem dois Marks iguais. Busque no Mercado com palavras de cor como “verde-azulado profundo” para achar um próximo da sua paleta, crie com ele de graça e reserve-o para que só você possa exportar com ele. O seu kit de marca guarda os códigos exatos para texto e acentos.
Perguntas frequentes
Quantas cores uma marca deve ter?
Quatro ou cinco bastam para a maioria das marcas: um fundo, uma cor principal, um tom de apoio, um neutro para o texto e um acento. Mais do que isso fica difícil de usar com consistência.
Qual é a melhor cor para uma marca nova?
Não existe uma melhor cor. Escolha uma cor principal que combine com o que você vende e depois um acento que seus concorrentes não usam, para que os clientes consigam identificar você.
As cores da minha marca devem combinar com o meu segmento?
Seguir o segmento com a cor principal ajuda as pessoas a entenderem você rápido. Quebrar a convenção com o acento é o que torna você memorável.
Como verificar se as cores da minha marca são acessíveis?
Meça o contraste da cor do texto sobre o fundo com um verificador de contraste WCAG. Texto corrido deve chegar a pelo menos 4,5:1.
Posso usar um degradê como cor de marca?
Sim, desde que seja feito com cores aparentadas da sua paleta e que você mantenha uma versão chapada para usos pequenos, como favicons e texto.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil