Paleta de cores da marca

O problema clássico: a cor da marca não bate

Praticamente toda empresa madura passa pela mesma frustração: o azul do site não é exatamente o mesmo azul do cartão de visita, que não é o mesmo azul da banner de feira, que não é o mesmo azul do painel de LED no evento. A causa é quase sempre uma combinação de paleta mal documentada, ausência de referência Pantone para impressão, fornecedores gráficos sem calibragem e equipes diferentes usando códigos diferentes "do mesmo" azul.

Paleta de cores não é só estética — é infraestrutura. Sem regra clara, cada designer, cada gráfica, cada fornecedor de comunicação visual interpreta a "cor da marca" do próprio jeito. O resultado é uma marca que parece quatro marcas diferentes dependendo do canal.

O artigo cobre a lógica da paleta (funções e hierarquia), os sistemas de cor a usar em cada contexto, requisitos de acessibilidade, tokens semânticos para produto digital, governança com fornecedores e os erros que comprometem consistência.

Funções da paleta: primária, secundária, neutra, funcional

Paleta bem estruturada tem hierarquia clara entre cores por função.

Cor primária. Uma única cor — o "azul Tiffany", o "vermelho Coca-Cola", o "verde Spotify" — que carrega a identidade. É a cor presente no logo, no botão principal, na chamada para ação. Idealmente, deve ser exclusiva o suficiente para ser reconhecida sem texto, em campo aberto.

Cor secundária. Uma ou duas cores que dão suporte à primária. Usadas em elementos de destaque secundário, ilustrações, ícones. Devem combinar com a primária e ter contraste suficiente entre si para não confundir.

Neutros. Tons de cinza (e às vezes bege, off-white) para texto, fundo, divisores, bordas. Bem feitos, contêm uma escala: do branco quase puro ao preto profundo, com pelo menos 5 a 7 níveis intermediários. Em sistemas de design maduros, a escala de neutros tem 9 a 12 níveis (cinza-50, cinza-100, cinza-200, e assim por diante).

Funcionais (estado). Cores para comunicar estado de interface: verde para sucesso, vermelho para erro, amarelo para alerta, azul para informação. Essas cores não fazem parte da identidade — fazem parte da gramática de interface. Em produto digital maduro, vermelho de erro é distinto da cor primária (especialmente se a primária for vermelha, o que cria conflito grave).

Paletas que ignoram a distinção entre cor de identidade e cor funcional acabam usando o vermelho da marca para sinalizar erro, com confusão semântica: a cor que deveria comunicar "isso é da gente" passa a sinalizar "isso está errado".

Sistemas de cor: RGB, HEX, CMYK, Pantone, OKLCH

Cor não é só uma. Cada substrato exige um sistema diferente, e a paleta documentada precisa traduzir para todos.

RGB (Red, Green, Blue). Sistema aditivo, usado em telas (monitor, celular, TV, LED). Valores de 0 a 255 em cada canal. Exemplo: RGB(0, 122, 255) para um azul típico.

HEX. Notação hexadecimal do RGB, padrão em desenvolvimento web e digital. Mesmo azul: #007AFF. O mais comum em arquivos digitais.

CMYK (Cyan, Magenta, Yellow, Key/Black). Sistema subtrativo, usado em impressão. Valores percentuais. O mesmo azul ficaria aproximadamente CMYK 100, 52, 0, 0. CMYK não consegue reproduzir todas as cores RGB — o gamut é menor —, e por isso azuis e verdes muito saturados perdem intensidade na impressão. Esse é o motivo do "azul do site não bate com o do papel".

Pantone (PMS). Sistema de cor física baseado em tintas pré-misturadas. Cada cor tem código (Pantone 286 C, por exemplo). Garante reprodução consistente entre gráficas, papéis e fornecedores — qualquer gráfica do mundo entrega o mesmo 286 C. Necessário em qualquer impressão profissional de marca e em substratos especiais (tecido, plástico, metal). Pantone também tem variações: C (coated, papel revestido), U (uncoated, papel sem revestimento), Neon, Metallics. Mesma marca, papéis diferentes, escolha de Pantone diferente.

OKLCH. Sistema mais novo, perceptualmente uniforme. Notação OKLCH(L%, C, h) com Luminância, Chroma e Matiz. Vantagem sobre HEX/RGB: mexer em luminância sem mudar matiz, criar escalas consistentes, gerar variações acessíveis automaticamente. Material Design 3 e sistemas de design modernos (Tailwind v4, Radix) adotaram OKLCH como padrão para escalas de cor.

Documentação completa da paleta inclui os equivalentes em todos os sistemas que a empresa usa — minimamente HEX/RGB para digital, CMYK para impresso e Pantone para gráficas profissionais.

Acessibilidade: WCAG 2.2 e contraste

Cor com baixo contraste é cor inacessível. Em interfaces digitais, isso significa que pessoas com baixa visão, daltonismo ou em situações de luz adversa (sol no celular, brilho de tela noturna) não conseguem ler o conteúdo. A diretriz internacional para acessibilidade web é a WCAG (Web Content Accessibility Guidelines), do W3C, na versão 2.2.

Os requisitos principais de contraste:

Texto normal (menor que 18pt regular ou 14pt bold). Razão de contraste mínima de 4,5:1 entre texto e fundo para nível AA. Para nível AAA (mais rigoroso), 7:1.

Texto grande (18pt+ regular ou 14pt+ bold). Razão mínima de 3:1 para AA, 4,5:1 para AAA.

Elementos de interface e gráficos. Razão mínima de 3:1 entre o elemento e o fundo (botões, ícones, bordas que comunicam função).

Ferramentas para verificar: WebAIM Contrast Checker (gratuita, online), Stark (plugin para Figma e navegador), Adobe Color, Able. A maioria entrega o cálculo em segundos a partir dos códigos HEX.

Atenção especial: daltonismo afeta cerca de 8% dos homens e 0,5% das mulheres. Confiar só em cor para diferenciar elementos (vermelho = erro, verde = sucesso, sem ícone nem texto) exclui esse público. Boa prática: cor sempre acompanhada de outro sinal (ícone, padrão, texto).

Cor primária da marca que não passa em 4,5:1 contra branco não pode ser usada para texto em fundo branco — precisa ter uma variação escurecida. Marcas com primária amarela ou laranja claras enfrentam essa restrição com frequência.

Tokens semânticos: a base do design system

Em produto digital, a evolução de paleta vai além de "azul-primário = #007AFF". O conceito de tokens semânticos separa a cor pura (azul-500, azul-600) da função da cor (botão primário, link, foco).

Há três camadas:

Tokens primitivos (referência). Cores puras nomeadas por matiz e nível: azul-50, azul-100, azul-200... até azul-900. Independem de uso.

Tokens semânticos. Função em interface: cor de fundo do botão primário, cor de texto sobre fundo da marca, cor de borda em estado de foco. Esses tokens apontam para um token primitivo: button-primary-bg ? azul-500.

Tokens de componente. Específicos por componente. card.bg ? surface, card.border ? border-subtle.

A vantagem é que mudar a cor primária da marca de "azul" para "verde" não exige procurar e substituir #007AFF em mil arquivos. Basta atualizar o que button-primary-bg aponta. Modo claro e escuro vivem disso: o mesmo button-primary-bg aponta para azul-500 no modo claro e azul-300 no escuro.

Material Design 3 (Google), Apple Human Interface Guidelines, Microsoft Fluent e bibliotecas como Radix Colors documentam essas camadas e oferecem referências práticas.

Aplicação em substratos diferentes

A cor muda fisicamente conforme o substrato. Documentar a paleta sem considerar isso é receita de inconsistência.

Tela retroiluminada (monitor, celular, tablet). RGB/HEX. Cor sai mais brilhante e saturada porque a luz vem de trás. A maioria dos arquivos digitais usa este sistema.

Tela impressa em papel. CMYK. Gamut menor — azuis e verdes saturados perdem intensidade. Para garantir cor exata, usar Pantone como referência e checar prova de cor física antes da tiragem.

LED externo, telão de evento. RGB com características próprias (densidade de pixel, profundidade de bit). Cores muito saturadas tendem a estourar; cores com pouca saturação tendem a se misturar. Calibragem com o fornecedor de LED é essencial em evento corporativo.

Plástico, metal, vinil. Pantone exclusivo para cada material. Pantone tem catálogos específicos para plástico (Pantone Plastics), metálicos e neons.

Tecido. Pantone TPX/TCX (Pantone for Textiles). Cor varia conforme tipo de fibra, processo de tingimento e fornecedor. Prova física é obrigatória.

Ambientes (sinalização, fachada, vitrine). Tinta industrial calibrada por Pantone. Aplicação em larga escala exige amostra física por iluminação ambiente.

O problema clássico da marca "Coca-Cola pelo Brasil" (cores ligeiramente diferentes em cada região) é exatamente isso: sem padronização Pantone e sem fornecedor calibrado, cada gráfica e cada empresa de comunicação visual interpreta o "vermelho" do próprio jeito.

Documentação e governança

Paleta sem documentação clara é paleta inexistente. O manual de marca deve cobrir:

Códigos completos em todos os sistemas. HEX, RGB, CMYK (coated e uncoated separados), Pantone (C e U mínimo, com TPX se houver aplicação em tecido). Em sistemas modernos, OKLCH como referência perceptual.

Hierarquia e função. Quais cores são primárias, secundárias, neutras, funcionais. Em que situação cada uma é usada.

Combinações permitidas e proibidas. Cor primária sobre cor secundária pode? Texto da marca sobre cor de erro pode? Sistema de cor maduro define regras explícitas.

Aplicações em substratos. Exemplos de uso correto em papel, tela, LED, tecido. Inclui notas de calibragem.

Acessibilidade. Quais combinações passam em WCAG AA. Quais variações usar para texto sobre fundos coloridos.

Tokens (se houver produto digital). Definição de cada token semântico e seu valor por modo (claro, escuro).

Governança define quem aprova mudanças na paleta (designer chefe, comitê de marca), processo para incluir nova cor, calendário de revisão periódica (anual costuma bastar).

Cuidados com licenciamento

Cor pura não pode ser registrada como marca isoladamente, mas há nuances:

Cor em conjunto com contexto comercial. O magenta da T-Mobile, o azul Tiffany, o laranja Hermès — todos têm registros de marca que cobrem a cor associada a categoria específica de produto. Uma joalheria que use exatamente o "Tiffany Blue" em embalagem azul tira-puro arrisca processo.

Pantone como serviço. O sistema Pantone é privado. Usar a referência Pantone em manual de marca é prática padrão e não cobrada, mas reproduzir o catálogo Pantone (com nomes e códigos completos) em material próprio pode infringir direitos da Pantone LLC.

Sub-marcas e licenciamentos. Quando a empresa licencia marca para fabricantes (camisetas com logo, produtos co-branded), o contrato deve listar Pantone exato e proibir variação.

Em definição de paleta para empresa nova, vale pesquisar se a cor primária pretendida está registrada por concorrente direto na categoria. Imitar deliberadamente cor de concorrente em categoria parecida é risco jurídico.

Erros que comprometem a consistência

Paleta sem hierarquia. Manual lista 12 cores sem ordem nem regra de uso. Cada designer escolhe a que prefere. O resultado é marca que parece arco-íris.

Cor primária ilegível em texto. Marca define amarelo brilhante como primária, esquece de testar contraste, descobre depois que não pode usar para nada além de elemento decorativo.

Ignorar acessibilidade. Texto cinza claro em fundo branco pode parecer elegante mas exclui leitores. WCAG AA é o mínimo legal em muitos contextos (governo, instituições financeiras, serviços públicos).

Sem referência Pantone. Empresa que só documenta HEX/RGB descobre, no primeiro material impresso, que CMYK não bate. Sem Pantone, cada gráfica entrega cor diferente.

Não prever expansão. Paleta com só duas cores funcionais (verde sucesso, vermelho erro) e ignora alerta e informação. Quando o produto cresce, paleta precisa ser ampliada às pressas, sem coerência.

HEX diferentes para "a mesma cor". Designers da empresa usam #007AFF, #0078FF, #007BFF — pequenas variações de azul, todas chamadas internamente de "azul da marca". A inconsistência aparece em produto digital sutilmente até desmoronar.

Não documentar uso e não-uso. Manual mostra as cores mas não dá exemplos de combinações certas e erradas. Times terceirizados (agência de campanha, fornecedor de feira) erram porque não tem regra.