Blog · Web & design
HEX, RGB, HSL : quelle différence et quel format de couleur utiliser ?
Vous avez repéré une jolie couleur dans un visuel Canva, une maquette ou un site web, et vous voulez la réutiliser ailleurs. Mais le champ couleur vous demande un code qui commence par un #, ou trois nombres entre 0 et 255, ou encore un pourcentage de « luminosité »... Ce sont en réalité trois façons d'écrire exactement la même couleur. Voici ce que chacune représente, et laquelle utiliser selon ce que vous voulez faire.
HEX, RGB, HSL : trois écritures pour la même couleur
Sur un écran, toute couleur est fabriquée en mélangeant de la lumière rouge, verte et bleue (le fameux « RVB », ou RGB en anglais pour Red, Green, Blue). C'est la base technique commune. HEX, RGB et HSL ne sont que trois manières différentes d'exprimer ce même mélange, chacune pensée pour un usage particulier.
- HEX (hexadécimal), comme
#2563EB: le format le plus utilisé en CSS et dans les outils web (Canva, Figma, WordPress...). Compact, facile à copier-coller, mais peu lisible pour un humain : personne ne « voit » à l'œil ce que#2563EBdonne comme couleur. - RGB, comme
rgb(37, 99, 235): les mêmes informations que le HEX, mais écrites en base 10, sous forme de trois quantités de rouge, vert et bleu allant chacune de 0 à 255. C'est plus proche de la façon dont l'écran affiche réellement la couleur, mais ça reste peu intuitif pour l'ajuster à la main : augmenter le rouge ET diminuer le bleu pour « éclaircir » une couleur sans la dénaturer n'a rien d'évident. - HSL, comme
hsl(221.2, 83.2%, 53.3%): la même couleur, mais découpée en trois notions bien plus parlantes — la teinte (Hue, un angle sur le cercle chromatique, de rouge à violet), la saturation (Saturation, à quel point la couleur est vive ou grisâtre) et la luminosité (Lightness, à quel point elle est claire ou sombre). C'est le format le plus pratique quand on veut raisonner sur une couleur plutôt que la deviner par tâtonnement.
Un exemple concret : convertir #2563EB en RGB puis en HSL
Prenons un bleu très courant sur le web (c'est notamment un bleu de la palette Tailwind CSS) : #2563EB. Le code hexadécimal se lit par paires de deux caractères, une paire par canal (rouge, vert, bleu), chacune représentant une valeur en base 16 :
25en hexadécimal = 37 en base 10 (rouge)63en hexadécimal = 99 en base 10 (vert)EBen hexadécimal = 235 en base 10 (bleu)
Ce qui donne rgb(37, 99, 235) : très peu de rouge, un peu plus de vert, et beaucoup de bleu — cohérent avec un bleu franc. En convertissant ensuite ce même triplet RGB vers HSL, on obtient hsl(221.2, 83.2%, 53.3%) : une teinte à 221° (dans la zone des bleus sur le cercle chromatique), une saturation élevée de 83% (une couleur vive, pas délavée) et une luminosité de 53% (ni trop claire, ni trop sombre — un bleu bien équilibré).
Pourquoi HSL est souvent plus pratique pour ajuster une couleur
L'intérêt de HSL apparaît dès qu'on veut décliner une couleur en plusieurs nuances — par exemple pour un bouton et ses états (normal, survol, actif), ou pour une charte graphique d'association avec une couleur principale et ses variantes plus claires ou plus foncées.
En partant du même bleu hsl(221.2, 83.2%, 53.3%) et en modifiant uniquement la luminosité, la teinte et la saturation restant identiques, on obtient une famille de couleurs parfaitement cohérente :
- Luminosité 70% :
hsl(221.2, 83.2%, 70%)→#739BF2(version claire, pour un fond ou un état désactivé) - Luminosité 53,3% :
hsl(221.2, 83.2%, 53.3%)→#2563EB(la couleur de base) - Luminosité 35% :
hsl(221.2, 83.2%, 35%)→#0F3EA4(version foncée, pour un état survolé ou actif)
Essayez de faire la même chose directement en RGB : il faudrait recalculer à la main les trois valeurs de rouge, vert et bleu à chaque fois, sans garantie de garder exactement la même teinte. Avec HSL, un seul curseur (la luminosité) suffit à obtenir des nuances harmonieuses, sans jamais « décaler » accidentellement la couleur vers le violet ou le turquoise.
Trouver le code couleur exact d'une image ou d'une maquette
Une situation fréquente : vous avez une image, une capture d'écran ou une maquette, et vous voulez récupérer le code exact d'une couleur qui s'y trouve pour l'utiliser ailleurs (un site, un document, une présentation). La méthode la plus fiable reste d'utiliser une pipette à couleurs (disponible dans la plupart des logiciels de retouche, ou via le sélecteur natif du système), qui donne directement le code HEX ou RGB du pixel choisi. Il ne reste plus ensuite qu'à le convertir dans le format dont vous avez besoin selon l'outil visé — HEX pour du CSS, RGB pour un logiciel de montage, HSL pour ajuster la teinte sans y toucher.
Quel format choisir selon votre usage ?
En résumé : utilisez HEX quand un outil vous le demande explicitement (feuilles de style CSS, la plupart des interfaces web) ou pour partager un code court et sans ambiguïté. Utilisez RGB quand vous travaillez avec des quantités de lumière brutes, par exemple dans certains logiciels de montage vidéo ou de retouche photo. Utilisez HSL dès que vous devez ajuster une couleur — l'éclaircir, l'assombrir, la désaturer — sans perdre sa teinte d'origine, typiquement pour construire une palette cohérente autour d'une couleur de marque.
À retenir
- HEX, RGB et HSL décrivent exactement la même couleur, sous trois formes différentes.
- HEX (
#2563EB) est le format standard du web et du CSS ; RGB (rgb(37, 99, 235)) exprime les mêmes valeurs en quantités de rouge/vert/bleu de 0 à 255. - HSL (
hsl(221.2, 83.2%, 53.3%)) sépare teinte, saturation et luminosité : c'est le format le plus pratique pour éclaircir, assombrir ou décliner une couleur sans changer sa teinte. - Pour trouver le code exact d'une couleur dans une image, une pipette suffit ; un convertisseur en ligne fait ensuite basculer instantanément entre HEX, RGB et HSL.