HEX, RGB, CMYK : la cohérence des couleurs de marque

Dans l'identité visuelle d'une marque, la couleur est souvent mémorisée avant même le logo, et pourtant il est très fréquent qu'un même turquoise paraisse éclatant sur un site web et délavé sur une carte de visite. La cause se résume généralement à une confusion entre hex rgb cmyk. Ces trois notations décrivent la même couleur pour des univers différents : les écrans mélangent de la lumière, l'impression mélange de l'encre. Préserver la cohérence des couleurs, c'est savoir quelle notation appartient à quel support, et pourquoi la conversion entre elles n'est jamais sans perte.

Ce que signifient vraiment HEX, RGB et CMYK

Les trois expriment une couleur avec des nombres, mais selon des modèles différents :

• RGB (rouge, vert, bleu) : le modèle additif des écrans, qui fonctionnent avec la lumière. Chaque canal va de 0 à 255 ; les trois au maximum donnent du blanc, tous à zéro du noir.
• HEX : une écriture hexadécimale du RGB, pas un modèle distinct. #FF8800 est exactement la même couleur que rgb(255, 136, 0) ; FF = 255, 88 = 136, 00 = 0.
• CMYK (cyan, magenta, jaune, noir/Key) : le modèle soustractif de l'impression à l'encre. En ajoutant de l'encre sur du papier blanc, on absorbe plus de lumière et on assombrit ; les valeurs sont généralement données en pourcentages.

Le point clé : HEX et RGB sont pour l'écran, CMYK pour l'impression. Une bonne charte de couleurs définit idéalement les deux.

Pourquoi écran et impression ne correspondent jamais exactement

RGB et CMYK reproduisent des plages de couleurs différentes (le gamut). Les écrans RGB peuvent afficher des couleurs très saturées comme des verts vifs, des bleus éclatants et des oranges fluo ; l'encre CMYK ne peut physiquement pas en atteindre certaines. Une couleur qui paraît saisissante à l'écran est donc écrêtée vers la teinte la plus proche atteignable à l'impression, et apparaît plus terne.

De plus, chaque appareil interprète la couleur un peu différemment : deux moniteurs, un téléphone et une presse offset peuvent rendre le même fichier différemment. C'est pourquoi une valeur HEX seule ne suffit pas ; ce qui régit réellement le processus, ce sont les profils colorimétriques (profils ICC) et les standards de référence d'une marque.

Pantone, profils colorimétriques et point de référence

En impression à l'encre, la cohérence la plus fiable vient des systèmes de tons directs comme le Pantone (PMS). Un Pantone est une encre standard pré-mélangée ; l'imprimeur reprend le code et reproduit exactement cette teinte sans tenter de mélanger quatre couleurs de process. C'est précisément pour cela que les identités d'entreprise fournissent si souvent une référence Pantone pour les logos.

Pour les écrans et les conversions, le profil colorimétrique compte :

• sRGB : le standard par défaut du web et de la plupart des écrans. Visez-le pour votre site, vos réseaux sociaux et tous vos visuels numériques.
• CMYK + profil ICC : en impression, on utilise le profil exigé par l'imprimeur (par exemple un profil papier couché). La conversion se fait via un mode de rendu choisi.

Réussir la conversion en pratique

Dans les outils de design, la conversion semble automatique, mais il faut en garder le contrôle. Quelques règles de base :

• Gardez le travail numérique en mode RGB/sRGB ; créez un document CMYK distinct pour l'impression, et ne mélangez pas les deux dans un seul fichier.
• En passant du RGB au CMYK, vérifiez les couleurs à l'œil : ajustez manuellement les tons vifs hors gamut vers la version la plus proche acceptable pour la marque, plutôt que de laisser l'écrêtage automatique de l'outil décider.
• Dans la charte, indiquez ensemble HEX, RGB, CMYK et, si possible, Pantone pour chaque couleur primaire et secondaire.

Côté CSS, utiliser une variable pour fixer la couleur web réduit la marge d'erreur :

:root {
  --brand: #1FB8A6;            /* HEX */
  --brand-rgb: 31, 184, 166;   /* même couleur, RGB */
}

.button {
  background: var(--brand);
  /* réutiliser la même couleur depuis une seule source pour une ombre translucide */
  box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.35);
}

Ainsi, tout le site puise dans une source unique, et votre couleur de marque ne dérive jamais d'un composant à l'autre.

Une checklist pour votre charte de couleurs

• Couleur primaire : HEX + RGB + CMYK + Pantone réunis.
• sRGB défini pour le web, profil ICC de l'imprimeur défini pour l'impression.
• Lisibilité et taux de contraste testés sur fonds clairs et foncés.
• Versions monochrome (noir et blanc) et négatif prêtes.
• Fichiers étiquetés : on sait clairement lequel est pour l'écran et lequel pour l'impression.

Questions fréquentes

Y a-t-il une différence de couleur entre HEX et RGB ?

Non. HEX n'est qu'une autre façon d'écrire le RGB ; dans le même profil colorimétrique, #1FB8A6 et rgb(31, 184, 166) donnent exactement la même couleur. La seule différence est la commodité d'écriture.

Puis-je imprimer mon logo directement à partir de valeurs RGB ?

C'est possible, mais le résultat devient imprévisible ; l'imprimeur convertit en CMYK en interne et les tons vifs peuvent se ternir. Pour l'impression, il est bien plus sûr de fournir du CMYK, ou une valeur Pantone pour les couleurs critiques.

Puis-je faire en sorte que le web et l'impression soient identiques ?

Une correspondance exacte est généralement impossible car lumière et encre fonctionnent différemment. L'objectif est une teinte si proche qu'elle passe inaperçue, et cohérente — ce que l'on obtient avec les bons profils et une référence Pantone.

Faites en sorte que la couleur de votre marque soit identique partout. Si vous avez besoin d'une charte cohérente avec les valeurs HEX, RGB et CMYK pour le logo, le web et l'impression, contactez-moi.