HEX, RGB, HSL : comprendre et convertir les couleurs

Une même couleur peut s’écrire de plusieurs façons en CSS, et chaque notation répond à un besoin différent. Voici le violet #6155f5 dans trois d’entre elles :

#6155f5
rgb(97 85 245)
hsl(245 89% 65%)

Ces trois lignes décrivent la même couleur (à un arrondi près pour la dernière, on y revient). Voici ce que chaque notation représente, comment passer de l’une à l’autre avec le convertisseur de couleurs et laquelle choisir selon l’usage.

Le HEX : trois valeurs en base 16#

Un code #rrggbb regroupe trois paires de chiffres hexadécimaux : rouge, vert et bleu, de 00 (aucune lumière) à ff (maximum). Pour #6155f5, 61 vaut 6 × 16 + 1 = 97, 55 vaut 85 et f5 vaut 245.

Quand chaque paire est faite de deux chiffres identiques, on peut abréger : #f80 signifie #ff8800. CSS accepte aussi des codes à 4 et à 8 chiffres, dont les derniers encodent l’opacité. Le convertisseur du site, lui, travaille avec des couleurs opaques : il lit le HEX à 3 ou 6 chiffres (avec ou sans #) et n’accepte pas la transparence.

Le RGB : la lumière de l’écran#

rgb(97 85 245) donne les mêmes trois valeurs en décimal, de 0 à 255. L’écran additionne de la lumière rouge, verte et bleue : rgb(255 0 0) est un rouge pur, rgb(255 255 0) un jaune, rgb(255 255 255) du blanc. La syntaxe moderne sépare les valeurs par des espaces, mais les virgules fonctionnent toujours.

Le HSL : une couleur comme on la décrit#

hsl(245 89% 65%) se lit en trois temps :

Teinte (0 à 360°) : l’angle sur la roue chromatique. 0 est le rouge, 120 le vert, 240 le bleu.
Saturation : 0 % donne un gris, 100 % une couleur vive.
Luminosité : 0 % donne du noir, 100 % du blanc.

L’intérêt se voit quand on fabrique des variantes. Pour éclaircir ou assombrir une couleur sans changer sa teinte, on ne touche qu’à la luminosité :

hsl(245 89% 95%)  fond très clair
hsl(245 89% 85%)  survol léger
hsl(245 89% 65%)  couleur de base
hsl(245 89% 45%)  bouton appuyé

Avec du HEX ou du RGB, il faudrait deviner trois valeurs à la fois.

Attention toutefois : la luminosité HSL n’est pas la luminosité perçue. Le jaune hsl(60 100% 50%) et le bleu hsl(240 100% 50%) ont la même luminosité HSL, mais le jaune sur blanc ne fait que 1,07:1 de contraste, contre 8,59:1 pour le bleu. Le HSL ne remplace pas une mesure avec le vérificateur de contraste.

Convertir sans perdre la bonne couleur#

Le HSL est exprimé en nombres entiers, ce qui arrondit. En repartant de hsl(245 89% 65%), on obtient #6456f5 et non #6155f5 : trois unités d’écart sur le rouge. Gardez donc le HEX ou le RGB comme valeur de référence, et ne convertissez pas en boucle d’un format à l’autre.

L’outil gère cinq formats : HEX, RGB, HSL, HSV (appelé HSB dans plusieurs logiciels de design) et OKLCH. Ce dernier, défini par CSS Color 4, est conçu pour que la luminosité se comporte de façon plus régulière pour l’œil : #6155f5 s’y écrit oklch(55.9% 0.23 279.3). Une valeur OKLCH que l’écran ne peut pas afficher est ramenée à la couleur affichable la plus proche, et l’outil vous le signale.

Utiliser le convertisseur#

Ouvrez le convertisseur de couleurs, puis choisissez une couleur avec le sélecteur, ou tapez-la dans n’importe quel champ.
Les autres champs se mettent à jour. Chaque champ accepte la syntaxe CSS : virgules ou espaces, nombres ou pourcentages, angles en deg, rad, grad ou turn, et les 16 noms de couleurs de base (red, navy, teal…).
Copiez la valeur voulue avec le bouton à côté du champ.
Regardez l’aperçu : il indique le contraste de la couleur avec du texte blanc et avec du texte noir. Pour #6155f5, environ 5,1:1 avec du blanc (niveau AA) et 4,1:1 avec du noir (suffisant seulement pour du grand texte).

Le calcul se fait dans votre navigateur ; aucune couleur n’est envoyée.

Quel format choisir selon l’usage#

HEX : le plus compact, idéal pour échanger une couleur avec un designer ou la copier dans un fichier de variables.
RGB : pratique quand une couleur est calculée par du code, par exemple sur un canvas.
HSL : le plus lisible pour ajuster à la main des états (survol, désactivé) autour d’une teinte.
OKLCH : adapté aux palettes et aux dégradés sur navigateurs récents, quand on veut des pas de luminosité réguliers. Le générateur de palette s’en sert pour calculer ses nuances de 50 à 950.