Formats de couleur expliqués : HEX, RGB et HSL

Sur le web, la même couleur peut s'écrire de plusieurs façons — #3498db, rgb(52, 152, 219) et hsl(204, 70%, 53%) sont exactement le même bleu. Savoir ce que signifie chaque format (et quand recourir à lequel) rend le choix, l'ajustement et l'harmonisation des couleurs bien plus faciles. Ce guide décortique HEX, RGB et HSL, et comment ils se rejoignent.

Tout commence par le rouge, le vert et le bleu

Les écrans créent la couleur en mélangeant trois lumières colorées : rouge, vert et bleu. Chaque couleur que vous voyez est une combinaison de ces trois canaux, chacun réglé sur une intensité de 0 (éteint) à 255 (plein). Le noir total est 0, 0, 0 ; le blanc total est 255, 255, 255. HEX et RGB ne sont que deux notations pour ces mêmes trois nombres.

RGB

RGB indique directement les trois valeurs de canal :

rgb(52, 152, 219)
     R    G    B

C'est le plus lisible des trois, car les nombres correspondent directement à « combien de rouge, vert, bleu ». Idéal quand vous voulez raisonner sur les canaux eux-mêmes.

HEX

HEX encode ces mêmes valeurs de canal 0–255 en hexadécimal (base 16), sous forme d'un # suivi de trois paires :

#3498db
 34 98 db
 R  G  B     →  R=52, G=152, B=219

Chaque paire va de 00 (0) à ff (255). HEX est compact et c'est le format par défaut dans la plupart des outils de design et en CSS, d'où le format que vous copierez-collerez le plus. Une forme abrégée existe aussi : #39f se développe en #3399ff en doublant chaque chiffre.

HSL

HSL décrit la couleur comme les gens y pensent intuitivement, avec trois axes différents :

• Teinte (Hue) (0–360°) — la couleur elle-même sur une roue : 0° rouge, 120° vert, 240° bleu.
• Saturation (Saturation) (0–100 %) — sa vivacité, du gris à la couleur pleine.
• Luminosité (Lightness) (0–100 %) — sa clarté, du noir au blanc en passant par la couleur.

hsl(204, 70%, 53%)
    hue  sat  light

Le super-pouvoir de HSL, c'est d'ajuster la couleur. Vous voulez une version plus sombre d'une couleur ? Baissez la luminosité et laissez la teinte et la saturation tranquilles. Vous voulez un jeu de nuances assorties ? Gardez la teinte fixe et faites varier la luminosité. Faire cela en HEX ou RGB signifie recalculer les trois canaux ; en HSL c'est un seul nombre.

Alpha : ajouter de la transparence

Chaque format a une variante avec un canal alpha pour l'opacité, de 0 (totalement transparent) à 1 (totalement opaque) : rgba(52, 152, 219, 0.5) et hsla(204, 70%, 53%, 0.5). Le CSS moderne autorise aussi un HEX à 8 chiffres où la dernière paire est l'alpha — #3498db80 est le même bleu à 50 %.

Lequel devriez-vous utiliser ?

• HEX — copier une couleur de marque fixe, ou coller dans un outil de design. Compact et universel.
• RGB / RGBA — quand vous raisonnez sur les canaux bruts ou avez besoin d'une transparence simple.
• HSL / HSLA — quand vous concevez : construire des palettes, des nuances survol/actif, ou ajuster une couleur au feeling.

La bonne nouvelle, c'est que vous n'avez pas à convertir à la main. Notre convertisseur HEX↔RGB traduit entre les formats instantanément, et le sélecteur de couleur vous laisse choisir une couleur visuellement et lire ses valeurs HEX, RGB et HSL d'un coup — en plus de construire dégradés et palettes. Besoin d'extraire une couleur d'une image ? Le sélecteur de couleur d'image fait exactement ça.