Códigos de cores da marca: como documentar hex, RGB, CMYK e Pantone

Os códigos de cores da marca pertencem a uma única tabela no seu guia de estilo, com uma linha por cor e uma coluna para cada meio: hex para sites, RGB para telas e vídeo, CMYK para impressão e uma referência Pantone para cor especial, sinalização e brindes. Acrescente um nome, uma função e as combinações de texto aprovadas, e qualquer pessoa, do desenvolvedor ao fabricante de placas, consegue reproduzir a cor sem chutar. A maior parte da inconsistência vem de pessoas inventando a própria conversão porque o guia só deu a elas um código.

A tabela de códigos de cores da marca

Aqui está um exemplo completo de uma marca fictícia com um vermelho primário, um azul secundário, uma tinta e dois neutros. Copie a estrutura; troque os valores pelos seus.

Para que serve cada código de cor

• Hex (#C8102E) é a forma abreviada da web para uma cor RGB. Desenvolvedores, o Figma e a maioria das ferramentas de design pedem esse formato. Códigos de cor hex explica como ler um.
• RGB (200 16 46) é a mesma cor escrita como valores de vermelho, verde e azul de 0 a 255. Editores de vídeo e alguns apps pedem esse formato. A conversão entre hex e RGB é exata; veja hex para RGB.
• CMYK (0 92 77 22) é a mistura de tintas ciano, magenta, amarelo e preto para impressão em quatro cores. Depende da impressora e do papel, então deve vir da sua gráfica ou de uma conversão com gerenciamento de cor.
• Pantone (186 C) nomeia uma tinta especial pré-misturada de um catálogo físico. É o jeito mais confiável de ter a mesma cor em cartões de visita, placas, tecido e embalagens. O sufixo importa: C é papel revestido (couché), U é papel não revestido.
• Opcional: valores oklch ou HSL ajudam equipes web a criar tons claros e variantes de modo escuro. Inclua se os seus desenvolvedores trabalham assim.

Como definir os códigos de cores da sua marca

1. 1

   Decida o seu meio principal

   Se a marca vive principalmente em telas, comece pelo hex. Se vive em embalagens, uniformes ou placas, comece por uma amostra física Pantone e ajuste a cor de tela a ela.

2. 2

   Escolha a correspondência Pantone pessoalmente

   Olhe um catálogo Pantone de verdade na luz do dia, não uma prévia na tela. Escolha as amostras revestida e não revestida mais próximas e anote as duas.

3. 3

   Peça o CMYK à sua gráfica

   Envie o hex e a referência Pantone e peça os valores CMYK com gerenciamento de cor, depois aprove uma prova impressa.

4. 4

   Ajuste os valores de tela por último

   Ajuste o hex para que fique parecido com a amostra impressa em algumas telas calibradas. Hex e RGB então derivam exatamente um do outro.

5. 5

   Registre as combinações aprovadas

   Liste quais cores podem ficar sobre quais, com as taxas de contraste, para que ninguém coloque texto vermelho sobre azul-marinho.

Pantone vs hex aprofunda a etapa de correspondência, incluindo por que a prévia de uma amostra Pantone na tela nunca fica exata.

Documente combinações aprovadas e contraste

Os códigos dizem às pessoas como fazer uma cor. As combinações dizem como usá-la. Uma tabela curta de contraste evita o mau uso mais comum, que é juntar duas cores da marca que parecem fortes e falham como texto e fundo.

O método por trás desses números está em contraste de cores e acessibilidade.

Como passar os códigos de cor para desenvolvedores

Entregue as cores aos desenvolvedores como tokens com nome, não num PDF que eles tenham de redigitar. Nomes por função deixam o código legível e sobrevivem a uma mudança de tom.

:root {
  --brand-primary: #c8102e;   /* Signal red, Pantone 186 C */
  --brand-secondary: #0047bb; /* Harbour blue, Pantone 2728 C */
  --brand-ink: #101820;       /* Ink, Pantone Black 6 C */
  --brand-mist: #d9d9d6;      /* Mist, Pantone Cool Gray 1 C */
  --brand-paper: #f5f3ee;     /* Paper */
}

Mantenha os códigos onde as pessoas criam

Uma tabela de cores num PDF só ajuda se as pessoas abrirem. Coloque a mesma paleta onde os designs são de fato feitos. No Gradiently, o kit de marca (parte do Pro) guarda as suas paletas de cores ao lado dos logos e das fontes, e o Designer as usa quando monta um design, então os códigos certos acompanham cada post. O resto do guia, da tipografia ao tom de voz, está em guia de estilo da marca.