Codes couleur HEX, RGB et HSL expliqués

Si vous avez déjà ouvert un fichier de design, copié #3B82F6, et que vous vous êtes demandé pourquoi le même bleu apparaît aussi sous la forme rgb(59, 130, 246) et hsl(217, 91%, 60%), vous êtes tombé sur les trois formats de couleur que tout designer web et tout développeur front-end finit par devoir maîtriser. Ils décrivent tous exactement le même pixel. Ils le décrivent simplement dans des langues différentes, et chaque langue excelle dans une tâche différente.

J'ai livré des design systems où le choix du mauvais format a coûté des heures. Donnez à un développeur un mur de codes hex pour l'état survolé d'un bouton et vous récolterez des approximations. Donnez-lui une échelle HSL et la relation entre les couleurs devient évidente. Ceci est donc moins un déballage aride de spécifications qu'un modèle mental de terrain, celui que j'aurais aimé qu'on me transmette tôt : ce que chaque format encode réellement, et quand y recourir.

HEX : le format qu'on copie, pas celui dans lequel on raisonne

Un code couleur hexadécimal n'est que du RGB déguisé. #RRGGBB, ce sont six chiffres hexadécimaux découpés en trois paires — rouge, vert, bleu — et chaque paire vaut un octet. L'hexadécimal (base 16) va de 0 à 9 puis de A à F, si bien que deux chiffres hex couvrent 00 à FF, soit 0 à 255 en décimal. C'est exactement un canal 8 bits par couleur. Trois canaux, trois octets, et les fameuses 16 777 216 couleurs possibles (256 × 256 × 256).

C'est toute la raison des six chiffres : un octet pour chacun de R, G et B. Prenez #3B82F6. Découpez : 3B, 82, F6. Convertissez chaque paire de l'hex au décimal — 3B vaut 59, 82 vaut 130, F6 vaut 246 — et vous venez de réaliser une conversion hex vers RGB à la main. C'est rgb(59, 130, 246). Même couleur, aucune magie.

Il existe un raccourci : #RGB se développe en doublant chaque chiffre, si bien que #F00 devient #FF0000 (rouge pur) et #0AF devient #00AAFF. Il ne fonctionne que lorsque chaque canal se trouve être un chiffre répété, raison pour laquelle on le voit surtout pour des valeurs rondes comme #FFF, #000 ou #333. Pratique dans du CSS écrit à la main, inutile pour les bleus arbitraires qu'une marque finit réellement par livrer.

L'hex gère aussi la transparence, ce qui surprend. Le CSS Color Module Level 4 a ajouté l'hex à huit chiffres, #RRGGBBAA, où la dernière paire est l'alpha : 00 totalement transparent, FF totalement opaque. Ainsi #3B82F680 est ce même bleu à environ 50 % d'opacité. Il existe aussi un raccourci à quatre chiffres (#RGBA), où les règles de style #3B8 s'appliquent et où chaque chiffre est doublé. C'est pris en charge par tous les grands navigateurs actuels ; seul l'antique Internet Explorer y échappe, auquel cas rgba() fait office de repli.

La force de l'hex, c'est d'être compact et sans ambiguïté — un seul token, facile à copier, facile à coller dans un outil de design ou une variable CSS. Sa faiblesse, c'est qu'il ne dit presque rien à votre cerveau. #3B82F6 est-il plus clair ou plus foncé que #2563EB ? Vous ne pouvez sincèrement pas le deviner en les lisant. C'est la falaise du haut de laquelle l'hex bascule.

RGB : la façon dont l'écran raisonne vraiment

RGB est le modèle de couleur additif sur lequel tourne votre moniteur. Chaque pixel, ce sont trois minuscules lumières — rouge, vert, bleu — et les valeurs indiquent l'intensité de chaque lumière, de 0 à 255. Les trois à 0, c'est le noir (toutes les lumières éteintes). Les trois à 255, c'est le blanc (toutes les lumières à fond). Poussez le rouge et le vert, laissez le bleu éteint, et vous obtenez du jaune — ce qui paraît à rebours si vous avez grandi en mélangeant de la peinture, où le rouge et le vert font de la boue. Les écrans ajoutent de la lumière ; la peinture en soustrait. C'est l'idée centrale de la couleur additive, et il faut la garder en tête car elle explique bien des moments « mais pourquoi cette couleur fait-elle ça ».

En CSS, vous écrivez rgb(59 130 246) (syntaxe moderne séparée par des espaces) ou rgb(59, 130, 246) (syntaxe historique avec virgules) ; les deux conviennent. Ajoutez l'alpha avec une barre oblique — rgb(59 130 246 / 50%) — ce qui a discrètement remplacé l'ancienne fonction distincte rgba(), même si rgba() fonctionne toujours partout.

RGB est plus lisible que l'hex parce que les nombres sont décimaux et les canaux explicites. Si vous voyez rgb(250, 250, 250), vous savez immédiatement que c'est un presque-blanc, puisque les trois sont calés au plus haut. Mais il partage le vrai défaut de l'hex : il est exécrable pour ajuster une couleur. Pour rendre rgb(59, 130, 246) 10 % plus foncé, vous ne pouvez pas simplement bouger un nombre — vous devez déplacer les trois canaux de concert, et trouver les bons rapports à la main relève de la perte de temps. Ce qui nous amène au format qui résout réellement ce problème.

HSL : celui dans lequel vous devriez raisonner

HSL — teinte (hue), saturation, luminosité (lightness) — est le format dans lequel je fais presque toute ma réflexion, et c'est celui qu'affiche le générateur de palettes de couleurs pour chaque couleur qu'il produit, aux côtés du RGB. Au lieu de décrire une couleur par la quantité de trois lumières à mélanger, il la décrit comme le ferait un humain.

• La teinte (hue) est un angle sur la roue chromatique, de 0 à 360 degrés. 0 (et 360) est le rouge, 120 le vert, 240 le bleu. Faites tourner l'angle et vous parcourez l'arc-en-ciel.
• La saturation dit à quel point la couleur est vive, de 0 % à 100 %. À 0 % vous obtenez du gris quelle que soit la teinte ; à 100 % elle est aussi intense que l'écran le permet.
• La luminosité (lightness) dit à quel point c'est clair ou foncé, de 0 % à 100 %. 0 % est toujours noir, 100 % toujours blanc, et 50 % la version « pure » de la teinte.

Notre bleu est hsl(217, 91%, 60%). Observez maintenant ce que HSL rend trivial. Vous voulez une nuance plus foncée pour l'état enfoncé d'un bouton ? Baissez la luminosité : hsl(217, 91%, 45%). Une teinte plus claire pour un fond de survol ? Montez-la : hsl(217, 91%, 92%). Une version assourdie, plus poussiéreuse, pour un contrôle désactivé ? Tirez la saturation vers le bas : hsl(217, 40%, 60%). La teinte n'a jamais bougé, si bien que tout cela se lit sans équivoque comme la même famille de bleu d'un bout à l'autre. Essayez d'obtenir l'une de ces variations en éditant des canaux RGB et vous comprendrez pourquoi HSL existe.

C'est aussi pour cela que HSL est le langage naturel pour construire des échelles, des teintes et des nuances. Verrouillez la teinte, faites marcher la luminosité par paliers — 95 %, 85 %, 70 %, 55 %, 40 %, 25 % — et vous obtenez une rampe cohérente, d'une teinte de fond pâle à une couleur de texte profonde, toutes liées de façon démontrable. C'est l'ossature de ma manière de construire des tokens de couleur évolutifs pour un design system, et c'est le mécanisme derrière les teintes, nuances et tons. HSL rend même l'harmonie chromatique arithmétique : une couleur complémentaire, c'est simplement votre teinte plus 180 degrés ; une triade, trois teintes espacées de 120 degrés. Si vous voulez la version approfondie, comprendre l'harmonie des couleurs en design d'interface la détaille.

La syntaxe CSS reflète le reste : hsl(217 91% 60%) ou la forme historique hsl(217, 91%, 60%), avec l'alpha via hsl(217 91% 60% / 50%). La teinte peut porter une unité deg mais n'en a pas besoin. Une mise en garde honnête : la luminosité du HSL n'est pas la même chose que la luminosité perçue. Un jaune pleinement saturé à 50 % de luminosité paraît bien plus lumineux à votre œil qu'un bleu à la même luminosité de 50 %. C'est une limite du modèle, pas un bug de vos yeux, et c'est précisément pourquoi un vérificateur de contraste existe plutôt que de se fier au nombre L — j'y reviens plus bas.

Alors lequel utilisez-vous vraiment ?

En pratique vous utilisez les trois, pour des raisons différentes, et l'astuce consiste à accorder le format au moment.

• HEX pour stocker et partager une couleur unique — charte de marque, variable CSS, valeur collée à un collègue. C'est la lingua franca ; tout le monde la lit.
• RGB quand vous travaillez canal par canal ou que vous dialoguez avec du code attendant des canaux numériques — canvas, traitement d'image, ou chaque fois qu'il vous faut des valeurs brutes 0–255. Également quand vous voulez un alpha direct sans avoir à penser en paires hex.
• HSL dès la seconde où vous devez modifier ou relier des couleurs : construire des états de survol et d'activation, générer une échelle de teintes, trouver un accent harmonieux, ou régler une palette en mode sombre où vous ajustez sans cesse la luminosité et rabattez la saturation pour que les couleurs ne vibrent pas sur un fond foncé.

Mon flux de travail réel : je raisonne et j'explore en HSL, puis je livre les valeurs finales sous forme de variables hex. Choisir la teinte, trouver la rampe de luminosité, vérifier la vivacité avec la saturation — puis figer chaque palier en un token hex que le reste de l'équipe consomme.

Une chose dont aucun format ne vous sauve, c'est le contraste. Ni HEX, ni RGB, ni HSL ne vous disent si un texte sera lisible sur un fond ; cela demande un vrai calcul de luminance face aux ratios WCAG. Les recommandations officielles de contraste du W3C exigent au moins 4.5:1 pour un texte courant. C'est pourquoi le générateur associe ses affichages HSL et RGB à un vérificateur de contraste intégré — pour que vous puissiez ajuster le curseur de luminosité et regarder le ratio se mettre à jour en direct, au lieu de livrer un joli bleu que personne ne peut lire.

Une fois que ces trois formats cessent de ressembler à des chaînes cryptiques pour devenir trois vues d'une seule couleur — un token copiable, les lumières brutes de l'écran, et un jeu de réglages à hauteur humaine — vous cessez de lutter contre vos couleurs et commencez à les piloter. Ouvrez le générateur de palettes de couleurs, générez quelque chose, et observez comment les nombres HSL évoluent quand vous ajustez un échantillon. Ce retour en direct est le moyen le plus rapide de faire enfin « tilt » sur tout cela.