Como criar uma paleta de cores de marca que realmente funcione
Um guia prático para designers sobre como criar uma paleta de cores para sua marca que resista ao modo escuro, a estados desativados e a todas as superfícies além do logotipo. Cinco marcas reais incluídas.
A maioria das paletas de cores de marcas são criadas para a apresentação de um logotipo e permanecem praticamente inalteradas até que o primeiro botão realmente precise de um estado desativado.
Uma paleta de cores de marca funcional não se resume a cinco cores. É um sistema em camadas: uma cor âncora, uma escala neutra real, cores semânticas, cores de estado e um plano para o modo escuro que já existia antes mesmo de alguém abrir o Figma. Este artigo explora essas camadas, mostra cinco marcas que acertaram em cheio e termina com a ordem de implementação.
Por que a maioria das paletas de cores de marcas falha
A maioria das paletas de cores de marcas falha não porque as cores estejam erradas, mas porque foram criadas para a apresentação de um logotipo em vez de um sistema de produção.
O processo típico funciona assim: um designer cria painéis de inspiração, escolhe cinco cores que parecem estar de acordo com o briefing, as rotula como primária, secundária, de destaque, clara e escura, e entrega a paleta para as equipes responsáveis pelo produto, site, documentação e campanhas. Nenhuma dessas equipes estava presente quando as cinco amostras foram escolhidas.
A cor "secundária" não possui uma gama intermediária utilizável. A cor "primária" está saturada demais para o corpo do texto. Ninguém escolheu um cinza neutro, então o designer inventa um.
A equipe do modo escuro desiste e reverte tudo por meio de um filtro CSS. A paleta cumpriu sua função na apresentação. Falhou na prática.
As Cinco Camadas de uma Paleta de Trabalho
Uma paleta que sobrevive ao trabalho real de branding tem cinco camadas, não cinco cores. Designers que desenvolvem sistemas de marca em grande escala discutem em qual camada uma cor pertence, não sobre qual tom de verde "combina mais conosco".
| Camada | Sua função | Quantidade típica |
|-------|--------------|----------------|
| Âncora | Reforça o reconhecimento da marca | 1 (talvez 1 suporte) | | Neutros | Superfícies, texto, bordas, fundos | 9 a 12 níveis |
| Semântico | Sucesso, aviso, crítico, informação | 3 a 5 famílias |
| Estado | Ao passar o mouse, foco, pressionado, desativado | Combinado com cada cor interativa |
| Escuro | Resolução do modo escuro de cada camada | Conjunto paralelo completo |
Observe o que não está nessa lista. Sem "cor secundária da marca", sem "terciária", sem "acento 2". A maioria das marcas que acham que precisam de uma segunda cor da marca, na verdade, precisam de uma escala neutra mais completa ou de uma cor âncora mais forte.
O achatamento é o problema. As camadas são o recurso.
Escolha a Cor Âncora Primeiro e Por Último
A âncora é a cor que carrega o reconhecimento da marca em todas as superfícies e é escolhida duas vezes: uma no início e outra depois de saber com o que ela ficará ao lado.
A primeira escolha é direcional. A cor principal deve ser aquela que, mesmo sem o logotipo, ainda represente a marca. A escolha da cor também é uma questão de apelo emocional, e é aí que o psicologia das cores define metade do trabalho antes mesmo da definição do hexadecimal. Pense em Stripe roxo, Linear roxo, Figma azul, Notion preto, Slack magenta. Uma única cor é responsável pela identidade visual.
A segunda escolha é técnica. Depois que a escala neutra é definida, a cor principal quase sempre precisa de um pequeno ajuste. Ela precisa contrastar com o tom neutro sobre o qual se encontra, precisa de uma versão otimizada para o modo escuro e precisa de estados de foco e de clique que não distorçam a imagem. Sistemas de marca eficazes utilizam de 5 a 9 tons principais, não apenas um hexadecimal definido.
Os Neutros São a Paleta
A maior parte de uma interface comercial é composta por tons neutros, e uma marca sem uma verdadeira escala de neutros não tem uma paleta, mas sim um painel de inspiração.
Uma verdadeira escala de neutros tem de 9 a 12 tons, do quase branco ao quase preto, ajustados à cor âncora adjacente. Tons de cinza puros geralmente parecem sem vida ao lado de uma âncora quente e frios demais ao lado de uma âncora azul.
A escala de neutros é onde o contraste de cores acessível é incorporado ou excluído do design. Cada tom de superfície tem um tom de texto e um tom de borda que transmitem contraste. Cada tom tem uma função: fundo, fundo sutil, superfície, superfície em relevo, sobreposição, divisor, borda, texto discreto, texto padrão, texto forte.
As marcas com o melhor trabalho em neutros tratam o neutro como o protagonista da paleta, não como um mero complemento. A âncora é a bandeira. Os neutros representam o país inteiro.
Três Marcas que Dominam a Disciplina da Âncora
Essas três marcas utilizam uma âncora discreta sobre uma escala neutra profunda, e a âncora permanece reconhecível porque nunca se espalha.
Notion
Veja ao vivo em notion.com/product
Notion representa o minimalismo extremo. Quase toda a superfície de trabalho é um tom de branco suave com texto preto. Um único azul-marinho profundo carrega a faixa de marketing, e a camada semântica realiza o trabalho de cor visível: vermelho, laranja, azul e verde para estados de tarefa.
O que copiar: escolha uma âncora e pergunte-se se a marca precisa de uma segunda. A resposta honesta geralmente é não.
⟦MARCA3⟧
⟦MARCA4⟧ utiliza a paleta de cores escuras mais definida da categoria. O tom principal é um único roxo. Os neutros compõem uma escala completa para o modo escuro (superfície, superfície sutil, superfície elevada, sobreposição), cada um com uma função diferente.
O que aproveitar: se o produto for lançado com modo escuro, crie a paleta escura com o mesmo cuidado que a paleta clara, e não como um filtro.
⟦MARCA7⟧
Veja ao vivo em stripe.com/payments
⟦MARCA8⟧ utiliza a abordagem mais clara e objetiva para o modo escuro em SaaS. O roxo com nuances violetas aparece em CTAs, links embutidos, ilustrações e elementos da marca, e praticamente em nenhum outro lugar. Quando o roxo aparece, o olhar o interpreta como ação, não como decoração.
O que aproveitar: quanto mais discreta a cor de destaque, mais reconhecível a marca. Cores de destaque soltas soam como ruído.
Duas Marcas Onde os Tons Neutros São Tudo
Essas duas marcas mostram o que acontece quando a própria escala de neutros carrega a marca e a cor de destaque é monocromática ou tokenizada em funções.
Supabase
A Supabase utiliza a paleta de cores de destaque mais disciplinada em ferramentas de desenvolvimento. A superfície é composta por neutros escuros quase monocromáticos. A cor de destaque é um único verde esmeralda, que aparece apenas em elementos da marca, CTAs e estados de sucesso. Nenhuma outra cor da marca é utilizada. A escala de neutros é a marca. O verde é o verbo.
O que aproveitar: uma marca pode dispensar completamente a cor de destaque se o sistema de neutros for disciplinado o suficiente. Algumas marcas precisam de uma escala de cinza característica, não de uma cor característica. ### Shopify
Veja ao vivo em polaris.shopify.com
O sistema Polaris da Shopify mostra como uma paleta de cores de marca se parece totalmente tokenizada. A paleta é apresentada como uma árvore de tokens de função: superfície, texto, ícone, borda, interativo, crítico, aviso, sucesso, informação, cada função com valores claros e escuros. O Polaris não deixa espaço para o designer ir além dos tokens definidos. A paleta não é uma vibe, é um contrato.
O que aproveitar: escreva os tokens como funções primeiro e resolva para hexadecimal somente na última etapa. Se o nome de um token descrever uma cor em vez de uma função, a paleta ficará inconsistente.
A Ordem de Construção em 6 Etapas
Construa a paleta nesta ordem e a maioria dos erros comuns não ocorrerá.
- Escreva a lista de funções antes da lista de cores. Âncora, superfícies neutras, texto neutro, bordas neutras, sucesso semântico, aviso semântico, crítico semântico, informação semântica, estado de foco, estado de desabilitado. Faça isso primeiro no papel.
- Escolha a direção da âncora, não o hexadecimal final. Uma tonalidade, uma meta aproximada de luminosidade e uma meta aproximada de saturação. Mantenha-a editável.
- Em seguida, crie a escala neutra, ajustada a essa âncora. De 9 a 12 etapas. Teste cada etapa em relação às outras. Neutros frios para âncoras frias, neutros quentes para âncoras quentes.
- Adicione cores semânticas como um conjunto, não individualmente. Sucesso, aviso, crítico, informação. Elas precisam parecer irmãs. Um verde isolado adicionado posteriormente quase sempre fica estranho em uma paleta com a qual não foi criado.
- Defina as cores de estado por meio de pares, não inventando novas. O efeito de passar o mouse geralmente representa uma mudança de um ou dois passos na escala. O efeito de foco geralmente é um anel delineado na tonalidade da âncora. O efeito de desativado geralmente representa um passo neutro específico.
- Confirme o hexadecimal final da âncora por último. Execute verificações de contraste em relação ao neutro sobre o qual ela se encontra. Ajuste o elemento irmão do modo escuro. Adicione etapas de foco e pressionamento. Só agora a âncora se torna um valor definido.
Por que a ordem importa
Cada camada restringe a seguinte, e executar as etapas inversamente é o que leva as paletas a terem cores que conflitam entre si.
Escolha a âncora por último e você a escolherá com pleno conhecimento da escala neutra na qual ela deve se encaixar. Escolha-a primeiro e cada opção neutra se tornará um compromisso em torno de uma cor decidida antes da existência da interface.
Para a teoria por trás dessa estrutura em camadas, o pilar teoria das cores para designers abrange toda a pilha. Para as regras de contraste por trás dos pares neutro-âncora, o contraste de cores acessível trata dos detalhes. Para paletas dentro de sistemas de design, o guia de sistemas de projeto apresenta a visão geral.
Os Três Erros Que Arruínam a Maioria das Paletas de Cores
Os mesmos três erros aparecem em quase todas as paletas de cores de marcas que fracassam, e todos eles decorrem da escolha do código hexadecimal antes da definição das funções.
O erro da paleta de cores do logotipo. Cinco cores na paleta porque o logotipo tem cinco cores. Nada mais precisava de cinco cores. Sem neutros, sem camadas semânticas, sem um plano para o modo escuro. O erro mais comum.
A armadilha da saturação. Todas as cores com a mesma saturação, geralmente alta. Parece vibrante em um moodboard, mas cansativo em uma interface real. Boas paletas variam a saturação de forma agressiva, e regras de proporção como a Regra 60-30-10 impedem que os tons mais vibrantes dominem a imagem.
O meio termo ausente. Um neutro claro, um neutro escuro, nada entre eles. Interfaces reais se baseiam no meio da escala. Uma paleta com apenas dois neutros fica sem graça, não importa o quão boa seja a cor principal.
Corrija o processo e os erros param de aparecer.
Perguntas Frequentes
Quantas cores uma paleta de cores de marca deve ter?
Menos cores âncora do que você imagina, mais cores neutras do que você imagina. A maioria das paletas de cores padrão tem 1 cor âncora, 9 a 12 tons neutros, 3 a 5 famílias semânticas, cores de estado combinadas e um conjunto paralelo para o modo escuro. A quantidade de matizes é pequena. A quantidade de tons neutros é grande.
Preciso de uma paleta separada para o modo escuro?
Não, uma paleta separada. Uma resolução paralela da mesma paleta. As funções permanecem idênticas, apenas os valores hexadecimais brutos mudam por tema. Se um designer estiver redesenhando o modo escuro manualmente do zero, a paleta não foi construída como um sistema.
Posso usar um gerador de paletas para criar uma paleta de marca?
Um gerador pode definir a cor âncora e uma direção neutra aproximada. Ele não pode construir o sistema. Cada paleta padrão neste artigo foi ajustada manualmente: tons neutros aquecidos ou resfriados para se adequarem à cor âncora, famílias semânticas ajustadas, valores do modo escuro personalizados e cores de estado combinadas passo a passo.
Construa o Sistema, Não as Amostras
Uma paleta de cores de marca não se resume a cinco cores em um painel de inspiração. É um sistema em camadas com funções, uma escala neutra, sinais semânticos, cores de estado e um plano para o modo escuro, construído em uma ordem específica.
Notion, Linear, Stripe, Supabase e Shopify não venceram com base em amostras de cores. Elas venceram ao tratar a paleta como infraestrutura: uma âncora, uma escala neutra completa, uma camada semântica significativa, uma camada de estado correspondente e um modo escuro projetado desde o início.
Construa as camadas, siga a ordem de 6 etapas e pare de escolher cores para a sua marca como se estivesse decorando um cômodo.
Want a brand color palette built for everything past the logo? Brainy builds palettes with a real neutral scale, dark mode, and semantic tokens baked in.
Get Started
