Les différents noms et désignations de couleurs dans une charte graphique

Une charte graphique est comme la carte d’identité visuelle d’une marque, d’une entreprise ou d’un projet. Elle définit toutes les règles qui garantissent une cohérence visuelle, y compris le choix et l’utilisation des couleurs.

Quand on ouvre une charte graphique, on tombe souvent sur une section consacrée à la palette de couleurs. Mais pour un œil non averti, on peut vite se sentir perdu face aux termes techniques : Pantone, CMJN, RVB, Hex, RAL…

On vous explique ici les différentes façons dont les couleurs sont nommées et codées dans une charte graphique, et pourquoi ces systèmes existent.

Pourquoi nommer les couleurs de plusieurs façons ?

Imaginons que vous décriviez une couleur à quelqu’un par téléphone : « C’est un bleu… mais pas trop clair… plutôt comme le ciel un jour d’été mais avec un petit côté turquoise ».

Votre interlocuteur risque d’imaginer une teinte différente de la vôtre. C’est là qu’intervient la charte graphique : elle ne se contente pas de dire « bleu », elle donne un code précis qui permet de reproduire exactement la même couleur, quel que soit le support (écran, papier, peinture, textile…).

Chaque système de nomination répond à un usage particulier :

• L’impression utilise des codes spécifiques aux encres.
• L’écran utilise des codes adaptés à la lumière émise.
• La peinture ou la signalétique utilisent encore d’autres références.

Le nom de couleur « humain »

Avant d’entrer dans les codes techniques, certaines chartes incluent tout simplement un nom descriptif.
Exemples :

• Bleu marine
• Rouge cerise
• Jaune moutarde
• Vert émeraude

Ces noms ne suffisent pas pour une reproduction fidèle, mais ils aident à la mémoire et au dialogue créatif : dire « on garde le vert menthe » est plus parlant qu’un code comme #3EB489.

Souvent, les marques donnent même des noms personnalisés à leurs couleurs, par exemple : « Bleu Horizon » ou « Rouge Passion ».

Les couleurs pour le web et l’écran : le code HEX et le RVB

1. Le code HEX (hexadécimal)

• Usage : design web, interfaces, applications.
• Format : #RRGGBB (Rouge, Vert, Bleu), où RR, GG et BB sont des valeurs en base 16 (hexadécimal) allant de 00 à FF.
• Exemple : #FF0000 correspond à un rouge pur.

Le code HEX est le plus utilisé par les webdesigners car il est compris par les navigateurs et facile à copier-coller dans du code CSS.

2. Le système RVB (ou RGB)

• Usage : écrans, affichage numérique.
• Format : rgb(valeur_rouge, valeur_vert, valeur_bleu), chaque valeur allant de 0 à 255.
• Exemple : rgb(255, 0, 0) est aussi un rouge pur.

RVB et HEX représentent la même chose, mais dans deux écritures différentes. Ils se basent tous deux sur la proportion de lumière dans la couleur. Dans cet exemple, #FF0000 = rgb(255, 0, 0).

Les couleurs pour l’impression : CMJN et Pantone

1. CMJN (ou CMYK en anglais)

• Usage : impression en quadrichromie.
• Signification : Cyan, Magenta, Jaune (Yellow) et Noir (Key).
• Format : pourcentages de chaque couleur, ex. C:0 M:100 J:100 N:0 pour un rouge vif.

En impression, on ne travaille pas avec de la lumière mais avec de l’encre. Les pourcentages indiquent la proportion de chaque encre utilisée. Avantage : ce système est universel dans l’imprimerie. Inconvénient : il peut y avoir de légères variations selon le papier ou l’imprimeur.

2. Pantone (PMS – Pantone Matching System)

• Usage : impression précise, identité visuelle forte.
• Principe : Pantone est un nuancier propriétaire où chaque couleur a un numéro unique (par exemple : Pantone 186 C).
• Avantage : couleur standardisée, identique dans le monde entier.
• Particularité : on utilise souvent Pantone pour les logos, car cela garantit que la couleur de la marque ne varie pas.

Les couleurs pour la peinture et la décoration : RAL et NCS

Certaines chartes graphiques concernent aussi la signalétique, les stands ou les espaces physiques. On utilise alors d’autres systèmes.

1. RAL

• Usage : peinture, signalétique, industrie.
• Format : code à 4 chiffres (par exemple : RAL 3020 pour un rouge vif).
• Avantage : facile à utiliser pour commander des peintures identiques dans différents pays.

2. NCS (Natural Color System)

• Usage : architecture, décoration.
• Principe : classification basée sur la perception humaine des couleurs.
• Format : code comme S 1050-Y90R, indiquant la teinte et la saturation.

Les nuances, déclinaisons et hiérarchie des couleurs

Une charte graphique ne se contente pas de lister les couleurs principales : elle définit souvent plusieurs niveaux.

• Couleurs primaires : ce sont les couleurs principales de la marque. Elles doivent être utilisées le plus souvent et représenter l’identité. Exemple : le rouge Coca-Cola, le bleu Facebook.
• Couleurs secondaires : elles complètent les primaires, mais sont utilisées moins souvent, pour éviter de brouiller le message visuel.
• Couleurs d’accent : des teintes destinées à mettre en valeur un élément important (bouton d’appel à l’action, titre, encart).
• Déclinaisons : on peut trouver plusieurs versions d’une même couleur (plus claire, plus foncée, transparente).

Quelles désignations retrouver dans une charte graphique de site web ?

Dans une charte graphique, la couleur n’est jamais laissée au hasard. Il faut au minimum une dénomination précise pour être sûr d’être raccord entre le client et le créateur du site.

Mais il faut savoir que les différents noms et systèmes (nom descriptif, HEX, RVB, CMJN, Pantone, RAL, NCS) servent à parler le même langage que les graphistes, imprimeurs, développeurs et décorateurs, tout en garantissant une identité visuelle cohérente.

Dans un projet de création de site web, le mieux est d’utiliser au minimum un code HEX ou un code RVB.