# Codes couleur de marque : documenter hex, RVB, CMJN et Pantone

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

Une couleur de marque ne reste cohérente que si chaque personne qui l’utilise a le bon code pour son support. Voici le tableau dont toute charte a besoin, l’usage de chaque code et l’ordre dans lequel les établir.

## The short version

- Les codes couleur de marque doivent donner chaque couleur en quatre formats : hex pour le web, RVB pour les écrans, CMJN pour l’impression et une référence Pantone pour les tons directs et les objets.
- Dans une charte graphique, chaque couleur a aussi besoin d’un nom, d’un rôle et d’une liste d’associations de texte validées avec leurs rapports de contraste.
- Hex et RVB décrivent exactement la même couleur d’écran et se convertissent donc avec précision, alors que les valeurs CMJN et Pantone demandent une conversion avec gestion des couleurs et un contrôle imprimé.
- Si votre marque apparaît surtout en impression ou sur des produits, choisissez d’abord la référence Pantone et alignez les codes écran sur elle.
- Nommez les couleurs par rôle, par exemple principale ou encre, pour que la charte garde son sens si une teinte change plus tard.

Les **codes couleur de marque** tiennent dans un seul tableau de votre charte graphique, avec une ligne par couleur et une colonne par support : hex pour les sites web, RVB pour les écrans et la vidéo, CMJN pour l’impression et une référence Pantone pour les tons directs, la signalétique et les objets. Ajoutez un nom, un rôle et les associations de texte validées, et n’importe qui, du développeur au fabricant d’enseignes, peut reproduire la couleur sans deviner. L’essentiel des incohérences vient de personnes qui inventent leur propre conversion parce que la charte ne leur donnait qu’un seul code.

## Le tableau des codes couleur de marque

Voici un exemple complet pour une marque fictive avec un rouge principal, un bleu secondaire, une encre et deux neutres. Copiez la structure et remplacez les valeurs par les vôtres.

| Nom et rôle | Hex | RVB | CMJN | Pantone |
| --- | --- | --- | --- | --- |
| Rouge signal, principale | `#C8102E` | 200 16 46 | 0 92 77 22 | 186 C |
| Bleu port, secondaire | `#0047BB` | 0 71 187 | 100 62 0 27 | 2728 C |
| Encre, texte | `#101820` | 16 24 32 | Noir riche fourni par l’imprimeur | Black 6 C |
| Brume, neutre | `#D9D9D6` | 217 217 214 | 0 0 1 15 | Cool Gray 1 C |
| Papier, fond | `#F5F3EE` | 245 243 238 | 0 1 3 4 | Support non imprimé |

Un tableau de couleurs de charte. Les valeurs CMJN sont de simples conversions arithmétiques données à titre d’illustration ; remplacez-les par celles que votre imprimeur obtient avec une conversion gérée en couleurs.

- Rouge signal: #c8102e
- Bleu port: #0047bb
- Encre: #101820
- Brume: #d9d9d6
- Papier: #f5f3ee

Les cinq mêmes couleurs en nuancier. Une charte doit toujours montrer la couleur elle-même à côté de ses codes, pour qu’un chiffre erroné saute aux yeux.

## À quoi sert chaque code couleur

- **Hex** (`#C8102E`) est l’écriture abrégée d’une couleur RVB sur le web. Les développeurs, Figma et la plupart des outils de design la demandent. [Les codes couleur hex](https://gradiently.design/fr/guide/color-codes-explained) explique comment en lire un.
- **RVB** (200 16 46) est la même couleur écrite en valeurs de rouge, vert et bleu de 0 à 255. Les logiciels de montage vidéo et certaines applications la demandent. La conversion entre hex et RVB est exacte ; voir [hex en RVB](https://gradiently.design/fr/guide/hex-to-rgb).
- **CMJN** (0 92 77 22) est le mélange d’encres cyan, magenta, jaune et noire de l’impression en quadrichromie. Il dépend de la presse et du papier, il doit donc venir de votre imprimeur ou d’une conversion gérée en couleurs.
- **Pantone** (186 C) désigne une encre d’accompagnement prémélangée, issue d’un nuancier physique. C’est le moyen le plus fiable d’obtenir la même couleur sur des cartes de visite, des enseignes, du tissu et des emballages. Le suffixe compte : C pour papier couché, U pour papier non couché.
- **En option, oklch ou TSL** aident les équipes web à construire des teintes et des variantes pour le mode sombre. Ajoutez-les si vos développeurs travaillent ainsi.

> **Toutes les couleurs d’écran ne s’impriment pas** Les bleus, verts et oranges très saturés sortent de ce que l’encre CMJN peut reproduire. Si votre couleur de marque en fait partie, décidez dès maintenant si l’impression utilise une encre Pantone en ton direct ou une version CMJN un peu plus terne, et notez-le. [RVB ou CMJN](https://gradiently.design/fr/guide/rgb-vs-cmyk) explique pourquoi.

## Comment établir vos codes couleur de marque

1. **Choisissez votre support principal** Si la marque vit surtout sur écran, partez du hex. Si elle vit sur des emballages, des tenues ou des enseignes, partez d’un échantillon Pantone physique et alignez la couleur d’écran dessus.
2. **Choisissez le Pantone en vrai** Regardez un vrai nuancier Pantone à la lumière du jour, pas un aperçu à l’écran. Choisissez les pastilles couchée et non couchée les plus proches et notez les deux.
3. **Demandez le CMJN à votre imprimeur** Envoyez le hex et la référence Pantone, demandez ses valeurs CMJN issues d’une conversion gérée en couleurs, puis validez une épreuve imprimée.
4. **Fixez les valeurs écran en dernier** Ajustez le hex pour qu’il ressemble à l’échantillon imprimé sur quelques écrans calibrés. Hex et RVB découlent ensuite exactement l’un de l’autre.
5. **Notez les associations validées** Indiquez quelles couleurs peuvent aller sur lesquelles, avec les rapports de contraste, pour que personne ne mette du texte rouge sur du bleu marine.

[Pantone ou hex](https://gradiently.design/fr/guide/pantone-colors) détaille l’étape de correspondance, y compris pourquoi l’aperçu d’une pastille Pantone à l’écran n’est jamais tout à fait juste.

## Documenter les associations et le contraste

Les codes disent comment fabriquer une couleur. Les associations disent comment l’utiliser. Un court tableau de contraste évite l’erreur la plus courante : réunir deux couleurs de marque qui paraissent fortes chacune mais échouent en texte sur fond.

| Texte | Fond | Contraste | Usage |
| --- | --- | --- | --- |
| Blanc | Rouge signal | 5,9:1 | Boutons, bannières, toutes tailles |
| Blanc | Bleu port | 8,0:1 | Toutes tailles |
| Encre | Papier | 16,1:1 | Texte courant |
| Rouge signal | Papier | 5,3:1 | Titres et liens |
| Rouge signal | Encre | 3,0:1 | Grand texte d’affichage uniquement |

Rapports de contraste calculés avec la formule WCAG. Le texte courant demande au moins 4,5:1, le grand texte 3:1.

La méthode derrière ces chiffres se trouve dans [contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility).

## Partager les codes couleur avec les développeurs

Donnez les couleurs aux développeurs sous forme de jetons nommés, pas dans un PDF à recopier. Les noms de rôle gardent le code lisible et survivent à un changement de teinte.

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

Le même tableau en propriétés personnalisées CSS, avec la référence Pantone gardée en commentaire pour qui en a besoin.

### À éviter

- Un code hex et rien d’autre
- Des couleurs nommées « rouge 2 » et « nouveau bleu »
- Un CMJN copié depuis un convertisseur en ligne
- Un Pantone choisi sur un aperçu à l’écran

### À faire

- Hex, RVB, CMJN et Pantone pour chaque couleur
- Des noms qui disent à quoi sert la couleur
- Un CMJN fourni par l’imprimeur, vérifié sur épreuve
- Un Pantone choisi dans un nuancier physique

## Garder les codes là où l’on crée

Un tableau de couleurs dans un PDF n’aide que si on l’ouvre. Mettez la même palette partout où les créations se font vraiment. Dans Gradiently, le kit de marque (inclus dans Pro) réunit vos palettes de couleurs à côté de vos logos et de vos polices, et le Designer s’en sert quand il met en page une création, si bien que les bons codes accompagnent chaque publication. Le reste de la charte, de la typographie au ton de voix, est traité dans [la charte graphique](https://gradiently.design/fr/guide/brand-style-guide).

## FAQ

### Quels codes couleur une charte graphique doit-elle contenir ?

Hex, RVB, CMJN et une référence Pantone pour chaque couleur, plus un nom, un rôle et les associations de texte validées avec leurs rapports de contraste.

### Le hex est-il la même chose que le RVB ?

Oui. Le hex est du RVB écrit en base seize, donc `#C8102E` et 200 16 46 sont exactement la même couleur.

### Comment convertir une couleur hex en CMJN ?

Les convertisseurs en ligne donnent un point de départ approximatif, mais le CMJN dépend de la presse et du papier. Demandez à votre imprimeur une conversion gérée en couleurs et validez une épreuve imprimée.

### Ma marque a-t-elle besoin d’une couleur Pantone ?

Si votre marque apparaît sur des enseignes, des emballages, des vêtements ou des objets, oui : une référence Pantone est le moyen le plus fiable d’obtenir la même couleur sur des matières différentes.

### Que signifie le C ou le U après un numéro Pantone ?

C signifie papier couché et U papier non couché. La même encre rend différemment sur chacun, alors notez les deux si vous imprimez sur les deux.