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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/brand-color-codes)

Uma cor de marca só é consistente se todos os que lhe tocam tiverem o código certo para o seu meio. Eis a tabela de que todo o guia de estilo precisa, para que serve cada código e a ordem para os calcular.

## The short version

- Os códigos de cor da marca devem dar cada cor em quatro formatos: hex para a web, RGB para ecrãs, CMYK para impressão e uma referência Pantone para cor direta e produtos físicos.
- Cada cor num guia de estilo precisa também de um nome, um papel e uma lista de combinações de texto aprovadas com os respetivos rácios de contraste.
- O hex e o RGB descrevem exatamente a mesma cor de ecrã, por isso podem ser convertidos com precisão, enquanto os valores CMYK e Pantone precisam de uma conversão com gestão de cor e de uma prova impressa.
- Se a tua marca aparece sobretudo em impressão ou em produtos, escolhe primeiro a referência Pantone e acerta os códigos de ecrã por ela.
- Dá nomes às cores pelo papel, como primária ou tinta, para o guia continuar a fazer sentido se um tom mudar mais tarde.

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.

| Nome e papel | Hex | RGB | CMYK | Pantone |
| --- | --- | --- | --- | --- |
| Vermelho sinal, primária | `#C8102E` | 200 16 46 | 0 92 77 22 | 186 C |
| Azul porto, secundária | `#0047BB` | 0 71 187 | 100 62 0 27 | 2728 C |
| Tinta, texto | `#101820` | 16 24 32 | Preto rico da gráfica | Black 6 C |
| Névoa, neutro | `#D9D9D6` | 217 217 214 | 0 0 1 15 | Cool Gray 1 C |
| Papel, fundo | `#F5F3EE` | 245 243 238 | 0 1 3 4 | Papel sem impressão |

Uma tabela de cores de guia de estilo. Os valores CMYK são conversões aritméticas simples mostradas a título de ilustração; substitui-os pelos valores que a tua gráfica te der a partir de uma conversão com gestão de cor.

- Vermelho sinal: #c8102e
- Azul porto: #0047bb
- Tinta: #101820
- Névoa: #d9d9d6
- Papel: #f5f3ee

As mesmas cinco cores como amostras. Um guia deve mostrar sempre a própria cor ao lado dos seus códigos, para que um dígito errado seja óbvio.

## 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](https://gradiently.design/pt-pt/guide/color-codes-explained) 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](https://gradiently.design/pt-pt/guide/hex-to-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.

> **Nem todas as cores de ecrã se podem imprimir** Azuis, verdes e laranjas muito saturados ficam fora do que a tinta CMYK consegue reproduzir. Se a tua cor de marca é uma delas, decide já se a impressão usa uma tinta direta Pantone ou uma versão CMYK ligeiramente mais baça e escreve-o. [RGB vs CMYK](https://gradiently.design/pt-pt/guide/rgb-vs-cmyk) mostra porquê.

## Como calcular os códigos de cor da tua marca

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. **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. **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. **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. **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](https://gradiently.design/pt-pt/guide/pantone-colors) 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.

| Texto | Fundo | Contraste | Uso |
| --- | --- | --- | --- |
| Branco | Vermelho sinal | 5,9:1 | Botões, banners, qualquer tamanho |
| Branco | Azul porto | 8,0:1 | Qualquer tamanho |
| Tinta | Papel | 16,1:1 | Texto corrido |
| Vermelho sinal | Papel | 5,3:1 | Títulos e ligações |
| Vermelho sinal | Tinta | 3,0:1 | Apenas texto grande de destaque |

Rácios de contraste calculados com a fórmula WCAG. O texto corrido precisa de pelo menos 4,5:1, o texto grande de 3:1.

O método por trás desses números está em [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

## 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.

```css
: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 */
}
```

A mesma tabela como propriedades personalizadas de CSS, com a referência Pantone num comentário para quem precisar.

### Evita

- Um código hex e mais nada
- Cores chamadas “vermelho 2” e “azul novo”
- CMYK copiado de um conversor online
- Pantone escolhido a partir de uma pré-visualização no ecrã

### Faz

- Hex, RGB, CMYK e Pantone para cada cor
- Nomes que dizem para que serve a cor
- CMYK da tua gráfica, confirmado numa prova
- Pantone escolhido a partir de um guia físico

## 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](https://gradiently.design/pt-pt/guide/brand-style-guide).

## FAQ

### Que códigos de cor deve incluir um guia de estilo da marca?

Hex, RGB, CMYK e uma referência Pantone para cada cor, mais um nome, um papel e combinações de texto aprovadas com os respetivos rácios de contraste.

### O hex é o mesmo que o RGB?

Sim. O hex é o RGB escrito em base dezasseis, por isso `#C8102E` e 200 16 46 são exatamente a mesma cor.

### Como converto uma cor hex para CMYK?

Os conversores online dão um ponto de partida aproximado, mas o CMYK depende da prensa e do papel. Pede à tua gráfica uma conversão com gestão de cor e aprova uma prova impressa.

### Preciso de uma cor Pantone para a minha marca?

Se a tua marca aparece em sinalética, embalagens, roupa ou merchandising, sim: uma referência Pantone é a forma mais fiável de obter a mesma cor em materiais diferentes.

### O que significa o C ou o U depois de um número Pantone?

C significa papel revestido e U papel não revestido. A mesma tinta parece diferente em cada um, por isso anota ambos se imprimes nos dois.