HEX, RVB, TSL ou CMJN : quel format de couleur utiliser et quand

Une même couleur, quatre langages différents

Choisissez une couleur, disons un corail chaleureux. Décrivez-la maintenant de quatre façons :

• HEX : #E8635A
• RVB : rgb(232, 99, 90)
• TSL : hsl(4, 75%, 63%)
• CMJN : 0, 57, 61, 9

Les quatre décrivent exactement la même couleur. Ce ne sont pas des standards concurrents : ce sont des représentations différentes de la couleur, optimisées pour des contextes différents. La confusion vient du fait qu'on ne sait pas quel contexte appelle quel format.

Ce guide détaille chaque format en langage clair : ce qu'il est, comment il fonctionne, quand l'utiliser et quand c'est un mauvais choix. Si vous travaillez avec la couleur à quelque titre que ce soit — design, développement, impression, marketing —, cela vous évitera de choisir le mauvais format pour votre projet.

HEX : le standard du web

De quoi s'agit-il

Le HEX (hexadécimal) est un code de six caractères précédé d'un dièse : #E8635A. Chaque paire de caractères représente les canaux Rouge, Vert et Bleu en notation base 16 (de 00 à FF).

Il est fonctionnellement identique au RVB, simplement écrit autrement. #E8635A équivaut à rgb(232, 99, 90). Le HEX n'est qu'une manière plus compacte d'écrire des valeurs RVB.

Quand utiliser le HEX

• CSS et développement web : le HEX est la notation de couleur par défaut en CSS. Tous les navigateurs la comprennent. color: #E8635A; est la façon la plus courante de définir une couleur sur le web.
• Outils de design : Figma, Sketch, Adobe XD et Canva utilisent tous le HEX comme saisie principale. Quand un designer dit « le bleu, c'est #3B82F6 », tout le monde comprend.
• Chartes graphiques : les chartes numériques incluent presque toujours des valeurs HEX, car elles sont courtes, sans ambiguïté et faciles à copier-coller.
• Communication rapide : « prends #333 » va plus vite que « prends rgb(51, 51, 51) » dans un message Slack.

Quand NE PAS utiliser le HEX

• Quand il vous faut de la transparence : le HEX standard à 6 chiffres ne gère ni le canal alpha ni l'opacité. Il faut passer au HEX à 8 chiffres (#E8635A80), moins lisible, ou basculer sur RGBA.
• Quand vous devez ajuster les couleurs par programmation : « éclaircis-le de 20 % » est presque impossible à calculer de tête en HEX. Le TSL est bien plus adapté.
• Production imprimée : les imprimeurs n'utilisent jamais le HEX. Jamais.

Exemple concret

Vous écrivez le CSS d'une page d'atterrissage. Le designer vous remet une charte avec les couleurs de la marque. Vous écrivez :

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

Le HEX est parfait ici : compact, lisible et pris en charge partout.

RVB : le modèle colorimétrique des écrans

De quoi s'agit-il

RVB signifie Rouge, Vert, Bleu : les trois couleurs de lumière que les écrans mélangent pour produire toutes les couleurs que vous voyez. Chaque canal va de 0 à 255. rgb(232, 99, 90) signifie 232 unités de rouge, 99 de vert et 90 de bleu.

Le RVB est le fondement de toute la couleur numérique. Le HEX n'est que du RVB dans une autre notation. Le TSL est une transformation du RVB pensée pour l'humain. Tout ce qui s'affiche sur votre écran finit en valeurs RVB envoyées aux pixels.

Quand utiliser le RVB

• Quand il vous faut de la transparence : le RGBA ajoute un canal alpha : rgba(232, 99, 90, 0.5) pour 50 % d'opacité. C'est plus propre que le HEX à 8 chiffres et largement pris en charge en CSS, dans les outils de design et en programmation.
• Programmation et développement d'applications : Swift, Kotlin, Flutter, React Native — les frameworks d'applications travaillent généralement en interne avec des valeurs RVB/RGBA.
• LED et éclairage : les lampes connectées (Philips Hue, bandeaux LED) utilisent des valeurs RVB. Si vous concevez des installations lumineuses physiques, le RVB est le format natif.
• Calculs de couleur : mélanger des couleurs, interpoler des dégradés ou générer de la couleur par code est simple en RVB.

Quand NE PAS utiliser le RVB

• L'impression : les écrans émettent de la lumière (synthèse additive) ; le papier la réfléchit (synthèse soustractive). Le RVB ne peut pas représenter fidèlement ce qui sortira d'une imprimante.
• Ajuster la luminosité ou la saturation : « désature cette couleur de 30 % » n'a rien d'intuitif en RVB. Il faudrait d'abord convertir en TSL.

Exemple concret

Vous développez une application React Native et vous avez besoin d'un calque semi-transparent :

backgroundColor: 'rgba(0, 0, 0, 0.6)'

Le RVB avec alpha est le choix naturel : direct, lisible et natif pour le moteur de rendu.

TSL : le format des designers

De quoi s'agit-il

TSL signifie Teinte, Saturation, Luminosité :

• Teinte (0°–360°) : la couleur elle-même, en tant que position sur la roue chromatique. 0° correspond au rouge, 120° au vert, 240° au bleu.
• Saturation (0 %–100 %) : l'intensité de la couleur. 0 % donne du gris, 100 % la forme la plus pure de la teinte.
• Luminosité (0 %–100 %) : le degré de clarté ou d'obscurité. 0 % correspond au noir, 100 % au blanc et 50 % à la couleur « vraie ».

hsl(4, 75%, 63%) signifie : une teinte rougeâtre (4°), très vive (75 % de saturation) et légèrement claire (63 %).

Quand utiliser le TSL

• Design systems et thématisation : le TSL est le meilleur format pour créer des échelles de couleur cohérentes. Vous voulez 10 nuances de votre couleur principale ? Gardez la teinte et faites varier la luminosité de 10 % à 95 %. Vous voulez une version adoucie ? Baissez la saturation. C'est quasiment impossible à faire intuitivement en HEX ou en RVB.
• Mode sombre / mode clair : changer de thème revient à ajuster la luminosité et la saturation, ce qui correspond directement aux paramètres du TSL. Tailwind CSS, Radix Colors et de nombreux design systems modernes reposent sur le TSL.
• Génération de couleurs par programmation : produire des états de survol, des états désactivés, des fonds et des bordures à partir d'une seule couleur de base est trivial en TSL : hsl(4, 75%, 73%) pour une variante plus claire, hsl(4, 75%, 43%) pour une plus foncée.
• Accessibilité : les vérifications de rapport de contraste deviennent plus intuitives quand on peut voir et ajuster la luminosité directement.

Quand NE PAS utiliser le TSL

• Communication entre équipes : la plupart des gens ne pensent pas en degrés et en pourcentages. Dire « le bouton est en hsl(4, 75%, 63%) » est moins parlant que « le bouton est en #E8635A » lors d'une remise de maquettes.
• L'impression : comme le RVB, le TSL est un modèle colorimétrique d'écran.

Exemple concret

Vous construisez un design system avec Tailwind CSS et vous avez besoin d'une échelle de couleur cohérente :

--brand-50: hsl(4, 75%, 95%);
--brand-100: hsl(4, 75%, 90%);
--brand-200: hsl(4, 75%, 80%);
--brand-500: hsl(4, 75%, 63%);
--brand-700: hsl(4, 75%, 43%);
--brand-900: hsl(4, 75%, 25%);

Même teinte, même saturation, luminosité différente. Une échelle parfaite en 30 secondes. Essayez donc en HEX.

CMJN : le format de l'imprimerie

De quoi s'agit-il

CMJN signifie Cyan, Magenta, Jaune, Noir. Ce modèle décrit la couleur comme un mélange d'encres appliquées sur du papier blanc. Chaque valeur va de 0 % à 100 % : 0, 57, 61, 9 signifie 0 % de cyan, 57 % de magenta, 61 % de jaune et 9 % de noir.

Contrairement au RVB (qui ajoute de la lumière pour créer les couleurs), le CMJN en soustrait au papier blanc. Plus d'encre = couleur plus foncée. C'est pourquoi on parle de modèle colorimétrique soustractif.

Quand utiliser le CMJN

• Design pour l'impression : cartes de visite, brochures, packaging, affiches, magazines. Tout fichier envoyé à un imprimeur professionnel doit être en mode colorimétrique CMJN.
• Préparer des fichiers pour l'impression dans InDesign ou Illustrator : ces outils permettent de travailler en mode CMJN pour prévisualiser le rendu des couleurs sur papier (toujours moins éclatant qu'à l'écran).
• Épreuvage couleur : vérifier si les couleurs de votre création sont reproductibles en CMJN. Certaines couleurs RVB très vives (surtout les verts fluo et les bleus électriques) sont physiquement impossibles à imprimer en CMJN : elles sont « hors gamut ».

Quand NE PAS utiliser le CMJN

• Tout ce qui s'affiche à l'écran : sites web, applications, réseaux sociaux, présentations, e-mails. Les écrans utilisent le RVB. Spécifier du CMJN pour un site web, c'est comme donner un itinéraire routier en milles nautiques : c'est bien une distance, mais inutilisable pour le trajet.
• Retouche photo : travaillez en RVB et ne convertissez en CMJN qu'au moment de l'export final destiné à l'impression.

Exemple concret

Vous avez conçu une affiche dans Illustrator. Avant l'envoi à l'imprimeur, vous convertissez le document en mode colorimétrique CMJN (File → Document Color Mode → CMYK Color), vous vérifiez les avertissements hors gamut et vous corrigez les bleus électriques virés au turquoise terne. Le PDF final est enregistré en CMJN avec le profil ICC de l'imprimeur.

Le tableau de référence rapide

L'antisèche : quel format pour quel travail

Peut-on convertir de l'un à l'autre ?

Oui, avec des réserves.

• HEX ↔ RVB : sans perte, ce sont les mêmes données dans une autre notation.
• RVB ↔ TSL : sans perte, il s'agit d'une transformation mathématique.
• RVB → CMJN : avec perte. Certaines couleurs RVB (bleus vifs, néons, verts éclatants) ne peuvent pas être reproduites en CMJN. La conversion les décale vers l'équivalent imprimable le plus proche, souvent plus terne.
• CMJN → RVB : techniquement possible, mais le résultat dépend du profil ICC utilisé. Deux convertisseurs peuvent donner des valeurs RVB légèrement différentes pour la même entrée CMJN.

Pour des conversions rapides sur le terrain, un sélecteur de couleur sur téléphone qui affiche les quatre formats simultanément reste le flux de travail le plus rapide. Color Picker Camera: HEX RGB fait exactement cela : visez n'importe quelle couleur avec l'appareil photo et lisez HEX, RVB, TSL et CMJN côte à côte. Une pression copie la valeur de votre choix. Disponible sur iPhone et Android.

Erreurs fréquentes

1. Concevoir pour l'impression en RVB

C'est l'erreur de débutant classique. Vous créez une affiche éclatante dans Photoshop en mode RVB, vous l'envoyez à l'imprimeur et le résultat paraît délavé, surtout les verts et les bleus. Convertissez toujours en CMJN avant l'export destiné à l'impression et vérifiez les avertissements de gamut.

2. Utiliser le HEX alors qu'il vous faut de la transparence

Si votre design comporte des calques semi-transparents, des ombres ou des effets de glassmorphisme, passez au RGBA ou au HSLA. Le HEX standard à 6 chiffres ne porte aucune information d'opacité, et celui à 8 chiffres est rarement employé car difficile à lire.

3. Bâtir un design system en HEX

« #3B82F6 mais 20 % plus clair » suppose une conversion, un calcul, puis une reconversion. En TSL : augmentez la luminosité de 20 %. Les tokens de design, les générateurs de thèmes et les propriétés personnalisées CSS modernes fonctionnent nettement mieux en TSL.

4. Convertir du CMJN en HEX pour le web et s'attendre à la même couleur

Une marque définie en CMJN pour l'impression paraîtra différente si on la convertit naïvement en HEX pour le web. La bonne approche : faire correspondre visuellement la couleur à l'écran avec la version imprimée, puis définir des valeurs HEX distinctes pour l'usage numérique. La charte graphique devrait contenir les deux.

FAQ

Quelle est la différence entre HEX et RVB ?

Aucune sur la couleur — uniquement sur la notation. Le HEX écrit les mêmes valeurs Rouge/Vert/Bleu en base 16. #FF0000 est identique à rgb(255, 0, 0). Le HEX est plus court à taper ; le RVB est plus facile à modifier par programmation et gère un canal alpha (RGBA).

Quand faut-il utiliser le CMJN plutôt que le RVB ?

Dès que le résultat final est imprimé sur un support physique : papier, carton, tissu, plastique. Si cela reste à l'écran, utilisez le RVB (ou HEX/TSL). Si c'est imprimé, passez au CMJN au moment de l'export.

Le TSL est-il meilleur que le HEX ?

Pour les design systems, la thématisation et la manipulation de couleur — oui. Pour communiquer vite et copier-coller dans les outils, le HEX est plus pratique. Ils décrivent les mêmes couleurs ; le TSL organise simplement l'information d'une manière qui correspond à la façon dont les humains pensent la couleur (teinte → vivacité → clarté).

Mon téléphone peut-il afficher les quatre formats à la fois ?

Oui. Color Picker Camera: HEX RGB capture une couleur depuis l'appareil photo ou une photo et affiche HEX, RVB, TSL et CMJN simultanément. Touchez une valeur pour la copier. L'application fonctionne comme un convertisseur de formats de couleur du monde réel : une capture, quatre formats.

L'essentiel

HEX pour le web et la communication rapide. RVB pour le développement d'applications et la transparence. TSL pour les design systems et la manipulation de couleur. CMJN pour l'impression.

Vous n'avez pas à en choisir un seul : vous devez utiliser le bon pour chaque contexte. Et quand il faut convertir de l'un à l'autre ou capturer une couleur du monde réel dans les quatre formats d'un coup, un sélecteur de couleur sur téléphone reste l'outil le plus rapide.

Télécharger Color Picker Camera pour iPhone | Télécharger pour Android

Télécharger le PDF

Autres formats: Markdown · Text · JSON · EPUB · JATS XML · BibTeX · RIS · CSL-JSON

Licence: CC BY 4.0