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

Os códigos de cor da marca pertencem a uma única tabela no teu guia de estilo, com uma linha por cor e uma coluna por meio: hex para sites, RGB para ecrãs e vídeo, CMYK para impressão e uma referência Pantone para cor direta, sinalética e merchandising. Acrescenta um nome, um papel e as combinações de texto aprovadas, e qualquer pessoa, de um programador a um fabricante de letreiros, consegue reproduzir a cor sem adivinhar. A maior parte da inconsistência vem de pessoas que inventam a sua própria conversão porque o guia só lhes deu um código.

A tabela de códigos de cor da marca

Eis um exemplo completo para uma marca fictícia com um primário vermelho, um secundário azul, uma tinta e dois neutros. Copia a estrutura; substitui os valores pelos teus.

Para que serve cada código de cor

• O hex (#C8102E) é a abreviatura da web para uma cor RGB. Os programadores, o Figma e a maioria das ferramentas de design pedem-no. Códigos de cor hex explica como ler um.
• O RGB (200 16 46) é a mesma cor escrita como valores de vermelho, verde e azul de 0 a 255. Os editores de vídeo e algumas aplicações pedem-no. A conversão entre hex e RGB é exata; vê hex para RGB.
• O CMYK (0 92 77 22) é a mistura de tintas ciano, magenta, amarelo e preto para impressão a quatro cores. Depende da prensa e do papel, por isso deve vir da tua gráfica ou de uma conversão com gestão de cor.
• O Pantone (186 C) nomeia uma tinta direta pré-misturada de um catálogo físico de amostras. É a forma mais fiável de obter a mesma cor em cartões de visita, sinalética, tecido e embalagens. O sufixo importa: C é papel revestido, U é papel não revestido.
• Opcional: valores oklch ou HSL ajudam as equipas web a criar tons e variantes de modo escuro. Inclui-os se os teus programadores trabalham assim.

Como calcular os códigos de cor da tua marca

1. 1

   Decide o teu meio principal

   Se a marca vive sobretudo em ecrãs, parte do hex. Se vive em embalagens, uniformes ou sinalética, parte de uma amostra Pantone física e acerta a cor de ecrã por ela.

2. 2

   Escolhe a correspondência Pantone em pessoa

   Olha para um guia Pantone real à luz do dia, não para uma pré-visualização no ecrã. Escolhe as amostras revestida e não revestida mais próximas e anota ambas.

3. 3

   Pede o CMYK à tua gráfica

   Envia o hex e a referência Pantone e pede os valores CMYK com gestão de cor, depois aprova uma prova impressa.

4. 4

   Fixa os valores de ecrã por último

   Ajusta o hex para parecer a amostra impressa em alguns ecrãs calibrados. O hex e o RGB passam então a seguir-se com exatidão.

5. 5

   Regista as combinações aprovadas

   Lista que cores podem ficar sobre que cores, com rácios de contraste, para ninguém pôr texto vermelho sobre azul-marinho.

Pantone vs hex trata da fase de correspondência com mais profundidade, incluindo porque é que a pré-visualização no ecrã de uma amostra Pantone nunca está bem certa.

Documenta as combinações aprovadas e o contraste

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

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

Partilhar códigos de cor com programadores

Dá aos programadores as cores como tokens com nome, não um PDF que têm de voltar a escrever. Os nomes por papel mantêm 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 */
}

Manter os códigos onde as pessoas desenham

Uma tabela de cores num PDF só ajuda se as pessoas a abrirem. Põe a mesma paleta onde os designs são realmente feitos. Na Gradiently, o kit de marca (parte do Pro) guarda as tuas paletas de cores ao lado dos logótipos e das fontes, e o Designer usa-as quando compõe um design, por isso os códigos certos viajam com cada publicação. O resto do guia, da tipografia ao tom de voz, está em guia de estilo da marca.