Hex, RVB, TSL et CMJN : les codes couleur expliqués comme il faut

Quatre façons d'écrire la même couleur, et celle qui rend la construction d'une palette presque mécanique. Lire un code hex à l'œil, pourquoi le CMJN ne peut égaler votre écran, et ce qu'exige vraiment le contraste.

Mis à jour le 22 août 20268 min de lecture

Hex, RVB, TSL et CMJN sont quatre notations d'une même chose, comme un demi, 0,5 et 50 % sont trois notations d'une seule quantité. Convertir entre les trois premières relève d'une arithmétique exacte, sans rien perdre. L'intéressant n'est pas la conversion : c'est que l'un de ces modèles rend la conception d'une palette presque mécanique, et que presque personne ne l'utilise parce que les codes hex sont ce qu'on lui a donné en premier.

Les quatre notations

Notation	Exemple	Ce qu'elle exprime	Où on la rencontre
Hex	`#3B82F6`	Rouge, vert et bleu en base 16	CSS, outils de design, chartes graphiques
RVB	`rgb(59, 130, 246)`	Les mêmes trois nombres, de 0 à 255	CSS, éditeurs d'image, code
TSL	`hsl(217, 91%, 60%)`	Teinte, saturation, luminosité	Conception de palettes, thèmes
CMJN	`76, 47, 0, 4`	Pourcentages d'encre pour quatre plaques	L'imprimerie, et rien d'autre

Hex et RVB sont la même information écrite de deux manières. Un code hex compte six chiffres en trois paires — rouge, vert, bleu — chaque paire étant un nombre de 00 à FF, soit de 0 à 255 en comptage ordinaire. Ainsi #3B82F6 vaut rouge 3B (59), vert 82 (130), bleu F6 (246). Le convertisseur hex vers RVB le fait instantanément, mais connaître la structure permet de lire un code approximativement à l'œil.

Les codes hex à trois chiffres sont un raccourci où chaque chiffre est doublé : #F60 signifie #FF6600. Et un code à huit chiffres ajoute une quatrième paire pour l'alpha : #3B82F680 est donc le même bleu à 50 % d'opacité. Les deux apparaissent dans de vraies feuilles de style et déroutent qui s'attend à six chiffres.

Pourquoi le TSL vaut la peine d'être appris

Le RVB décrit la couleur comme un écran la produit — trois lumières à trois intensités — ce qui décrit le matériel et non ce que vous voyez. C'est presque inutile pour des décisions de design. Demandez une version un peu plus sombre de #3B82F6 : le RVB ne donne aucune réponse évidente. Demandez laquelle de deux couleurs est la plus saturée : il faut réfléchir.

Le TSL décrit la couleur comme les gens en parlent. La teinte est la position sur la roue chromatique, de 0 à 360 degrés : rouge à 0, vert à 120, bleu à 240. La saturation va de 0 % (gris) à 100 % (vif). La luminosité va de 0 % (noir) à 100 % (blanc) en passant par 50 % (la couleur pure). Chacune est un bouton distinct, et chaque bouton fait exactement une chose.

Une nuance plus sombre de la même couleur. Gardez teinte et saturation, baissez la luminosité. hsl(217, 91%, 60%) devient hsl(217, 91%, 45%) — un état de survol, réglé.
Une version atténuée pour les fonds. Gardez teinte et luminosité, descendez la saturation à 15 %. La couleur restera perçue comme appartenant à la même famille.
Un accent complémentaire. Ajoutez 180 à la teinte. Ajoutez 30 pour une voisine qui s'harmonise au lieu de contraster.
Une gamme complète de teintes pour un système de design. Une teinte, une saturation, et des luminosités de 95, 90, 80, 65, 50, 40, 30, 20. Voilà une échelle de huit paliers issue d'une seule décision.
Une palette cohérente. Choisissez trois ou quatre teintes réparties régulièrement sur la roue et gardez saturation et luminosité constantes. Les couleurs ainsi choisies s'accordent d'elles-mêmes.

Rien de tout cela n'est accessible en hex ou en RVB sans conversion, d'où l'argument pratique de passer votre couleur de marque une fois dans le convertisseur RVB vers TSL et de réfléchir dans cet espace. Le générateur de palettes applique la même logique de rotation de teinte — dans un espace colorimétrique perceptuel, pour que la luminosité reste vraiment égale — si vous préférez partir d'un résultat plutôt que du calcul.

Hex, RVB, TSL et CMJN dans tous les sens — convertis sur votre appareil, sans rien envoyer nulle part.

Convertir un code couleur

Le CMJN est une conversion d'une autre nature

Les trois premières notations sont des descriptions interchangeables d'une même chose. Le CMJN, non — et c'est là que la couleur se perd réellement au lieu d'être simplement réécrite. Le RVB est additif : un écran émet de la lumière rouge, verte et bleue, et les trois à pleine intensité donnent du blanc. Le CMJN est soustractif : les encres cyan, magenta, jaune et noire absorbent la lumière du papier blanc, et plus d'encre signifie plus sombre.

La conséquence est que l'ensemble des couleurs que l'encre peut produire est plus petit que celui qu'un écran peut émettre, et l'écart est maximal précisément là où les designers aiment travailler. Les bleus vifs, les verts électriques, les orangés brûlants et tout ce qui est fluo existent à l'écran et n'ont pas d'équivalent en encre. Une conversion doit leur substituer la couleur imprimable la plus proche, et sur le papier cela paraît plus terne que ce que vous aviez validé à l'écran.

Couleur	À l'écran	Imprimée en CMJN
Bleu pur `#0000FF`	Électrique, saturé	Nettement plus terne et plus violacé
Vert vif `#00FF00`	Éclatant	Considérablement plus sombre et plus gris
Nuances fluo et néon	Lumineuses	Inatteignables sans un ton direct
Noir profond pour le texte	Dense	Correct — mais utilisez un noir riche sur les grands aplats
Carnations, tons terreux, pastels	Normaux	Se reproduisent très bien

Deux habitudes pratiques en découlent. Vérifiez vos couleurs de marque essentielles dans le convertisseur RVB vers CMJN avant de vous y engager pour un support imprimé, afin de découvrir un problème de gamut au stade du design et non à celui de l'épreuve. Et pour les grands aplats noirs, n'utilisez pas un noir de seule plaque : un noir riche mêlant un peu de cyan, de magenta et de jaune évite le gris délavé que produit le noir simple sur une grande surface.

Prélever des couleurs dans une image

Souvent, la couleur voulue existe déjà dans une photographie, dans la capture du site d'un concurrent, ou dans un logo qu'on vous a envoyé en PNG sans aucune charte. Le générateur de palettes dispose d'une pipette qui lit la valeur exacte de n'importe quel pixel de l'image ouverte ; collez ce code dans la pipette pour obtenir les quatre notations d'un coup.

Deux précautions pour le prélèvement sur photographie. La compression JPEG altère subtilement la couleur, surtout sur les contours et dans les aplats : le pixel que vous prélevez peut donc être un artefact plutôt que la vraie couleur — prélevez au milieu d'une large zone uniforme, pas près d'une limite. Et une photographie porte l'éclairage sous lequel elle a été prise : un rouge de marque photographié sous une lumière d'intérieur chaude se prélève en orange. Pour un logo, réclamez le fichier vectoriel ou le code hex exact ; la pipette sert quand rien de mieux n'existe.

Le contraste, et les nombres qui comptent

Quelle que soit la notation, les choix de couleur sont contraints par la lisibilité. Les recommandations d'accessibilité l'expriment en rapport de contraste entre le texte et son fond : au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte — environ 24 px, ou 19 px en gras — ainsi que pour les limites visuelles des contrôles comme les boutons et les champs de formulaire.

Le TSL n'aide ici que comme repère approximatif, car le calcul repose sur la luminance relative — la clarté réellement perçue d'une couleur — et non sur la luminosité TSL. À luminosité TSL égale, le jaune est bien plus clair que le bleu : #FFFF00 sur #0000FF donne environ 8:1. Et deux couleurs pleinement saturées à luminosité identique — un rouge pur et un vert pur à 50 % — paraissent violemment différentes mais n'atteignent qu'environ 2,9:1, ce qui échoue même au minimum de 3:1 et devient pire encore pour une personne daltonienne au rouge et au vert. Ce seul défaut explique une bonne part des interfaces inaccessibles ; vérifier le rapport réel plutôt que de se fier à un écart de teinte l'évite.

Questions fréquentes

Comment convertir un code hex en RVB ?

Découpez les six chiffres en trois paires et lisez chacune comme un nombre en base 16 allant de 00 à FF, soit de 0 à 255. Ainsi `#3B82F6` vaut rouge 59, vert 130, bleu 246. Un code à trois chiffres comme `#F60` est l'abréviation de `#FF6600`, chaque chiffre étant doublé, et un code à huit chiffres ajoute une quatrième paire pour la transparence alpha.

Le TSL est-il meilleur que le RVB ?

Pour décrire une couleur à un écran, ils sont équivalents : chaque valeur TSL correspond à une seule valeur RVB. Pour prendre des décisions de design, le TSL est bien supérieur, car il sépare teinte, saturation et luminosité en boutons indépendants ; nuances plus sombres, variantes atténuées et palettes assorties deviennent alors une modification d'un seul nombre au lieu d'une supposition sur trois.

Pourquoi mes couleurs paraissent-elles différentes à l'impression ?

Les écrans émettent de la lumière et les imprimantes l'absorbent, et l'encre ne peut tout simplement pas atteindre certaines couleurs qu'un écran produit — bleus vifs, verts éclatants et tout ce qui est fluo en particulier. La conversion substitue la couleur imprimable la plus proche, ce qui paraît plus terne. Vérifier les couleurs clés en CMJN avant de s'engager évite la surprise au moment de l'épreuve.

Quel rapport de contraste faut-il pour un texte lisible ?

Au moins 4,5:1 entre le texte et le fond pour le texte courant, et 3:1 pour le grand texte d'environ 24 px ou 19 px en gras, ainsi que pour les limites des contrôles interactifs. C'est la luminance relative — la clarté réellement perçue de chaque couleur — qui détermine ce nombre : deux couleurs de teintes différentes mais de clarté voisine échoueront donc, si dissemblables paraissent-elles. La luminosité TSL n'est qu'un repère approximatif : un rouge pur et un vert pur partagent 50 % de luminosité et n'atteignent pourtant qu'environ 2,9:1.