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

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.

À 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 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.
• 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.

Comment établir vos codes couleur de marque

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

La méthode derrière ces chiffres se trouve dans contraste des couleurs et accessibilité.

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.

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

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.