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

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

Uma cor de marca só é consistente se todo mundo que mexe nela tem o código certo para o seu meio. Aqui está a tabela que todo guia de estilo precisa, para que serve cada código e a ordem para defini-los.

## The short version

- Os códigos de cores da marca devem trazer cada cor em quatro formatos: hex para a web, RGB para telas, CMYK para impressão e uma referência Pantone para cor especial e produtos físicos.
- Cada cor num guia de estilo também precisa de um nome, uma função e uma lista de combinações de texto aprovadas com suas taxas de contraste.
- Hex e RGB descrevem exatamente a mesma cor de tela, então podem ser convertidos com precisão, enquanto valores CMYK e Pantone precisam de uma conversão com gerenciamento de cor e de uma prova impressa.
- Se a sua marca aparece principalmente em impressos ou produtos, escolha primeiro a referência Pantone e ajuste os códigos de tela a ela.
- Dê nome às cores pela função, como primária ou tinta, para que o guia continue fazendo sentido se um tom mudar depois.

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.

| Nome e função | 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, neutra | `#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 como ilustração; troque pelos valores que a sua gráfica fornecer a partir de uma conversão com gerenciamento de cor.

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

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

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

> **Nem toda cor de tela pode ser impressa** Azuis, verdes e laranjas muito saturados ficam fora do que a tinta CMYK consegue reproduzir. Se a cor da sua marca é uma delas, decida agora se o impresso usa uma tinta especial Pantone ou uma versão CMYK um pouco mais apagada, e registre isso. [RGB vs CMYK](https://gradiently.design/pt-br/guide/rgb-vs-cmyk) mostra por quê.

## Como definir os códigos de cores da sua marca

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

| 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 links |
| Vermelho sinal | Tinta | 3,0:1 | Só texto de destaque grande |

Taxas de contraste calculadas com a fórmula WCAG. Texto corrido precisa de pelo menos 4,5:1, texto grande de 3:1.

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

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

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

### Evite

- Um código hex e mais nada
- Cores chamadas “vermelho 2” e “azul novo”
- CMYK copiado de um conversor online
- Pantone escolhido por uma prévia na tela

### Faça

- Hex, RGB, CMYK e Pantone para cada cor
- Nomes que dizem para que serve a cor
- CMYK da sua gráfica, conferido numa prova
- Pantone escolhido num catálogo físico

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

## FAQ

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

Hex, RGB, CMYK e uma referência Pantone para cada cor, além de um nome, uma função e as combinações de texto aprovadas com suas taxas de contraste.

### Hex é o mesmo que RGB?

Sim. Hex é RGB escrito em base dezesseis, então `#C8102E` e 200 16 46 são exatamente a mesma cor.

### Como converter uma cor hex para CMYK?

Conversores online dão um ponto de partida aproximado, mas o CMYK depende da impressora e do papel. Peça à sua gráfica uma conversão com gerenciamento de cor e aprove uma prova impressa.

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

Se a sua marca aparece em placas, embalagens, roupas ou brindes, sim: uma referência Pantone é o jeito mais confiável de ter 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, não revestido. A mesma tinta fica diferente em cada um, então anote os dois se você imprime nos dois.