Convertir une couleur entre RGB, HSL et hexadécimal

Travailler avec la couleur sur le web implique de jongler en permanence entre plusieurs notations. Un convertisseur de couleur évite les erreurs manuelles et permet de passer instantanément d'un format à l'autre selon le contexte d'utilisation. Chaque format a ses forces, et savoir laquelle utiliser est l'un des réflexes du développeur front-end.

Voici les usages typiques qui motivent une conversion de couleur :

• RGB est natif en CSS et JavaScript, lisible par les humains pour comprendre une dominante (canaux rouge, vert, bleu sur 0-255).
• HSL rend la modification d'une teinte triviale : il suffit d'ajuster la saturation ou la luminosité sans recalculer chaque canal.
• HEX est le format canonique pour le copier-coller : six caractères, compatible partout, idéal pour les maquettes Figma, Sketch ou les guides de style.
• Les conversions HEX to RGB, RGB to HEX, HEX to HSL et leurs réciproques sont les opérations les plus courantes en CSS et JavaScript.

RGB et RGBA (Red, Green, Blue, Alpha)

Chaque canal est codé sur un entier entre 0 et 255, ce qui correspond à un octet par composante et donne 16 777 216 couleurs possibles. Le canal alpha de RGBA va de 0 (transparent) à 1 (opaque) et contrôle la transparence.

.bouton {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX et HEX8 (notation hexadécimale)

Format compact très répandu : #RRGGBB sur six caractères, où chaque paire représente un canal RGB en base 16. La variante #RRGGBBAA sur huit caractères ajoute le canal alpha en hexadécimal (00 transparent, FF opaque). La notation courte #RGB existe aussi : #F53 est l'équivalent de #FF5533.

.titre  { color: #1400B6; }
.ombre  { color: #1400B680; }   /* alpha 50% */
.accent { color: #F53; }        /* forme courte */

HSL et HSLA (Hue, Saturation, Lightness, Alpha)

HSL décrit la couleur de façon perceptuelle. Hue est un angle sur la roue chromatique (0 à 360°), Saturation et Lightness sont des pourcentages. C'est le format à privilégier pour générer des variantes : éclaircir un bouton survolé, désaturer un état désactivé, créer une palette cohérente en faisant varier uniquement la teinte.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* plus clair */
$primary-muted: hsl(247, 30%, 36%);    /* moins saturé */

Autres formats existants

CMYK (Cyan, Magenta, Yellow, Key) est utilisé en impression : il décrit une couleur par soustraction d'encres et n'est pas pertinent à l'écran. OKLCH et LAB sont des espaces perceptuellement uniformes apparus en CSS Color Level 4 ; ils permettent un meilleur contrôle de la luminosité ressentie. Cet outil se concentre sur les conversions RGB, HEX et HSL, qui couvrent l'immense majorité des besoins web.

HEX vers RGB revient à parser la chaîne par paires de caractères et à interpréter chaque paire comme un entier en base 16 :

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB vers HEX est l'opération inverse : chaque canal est converti en base 16, complété à deux caractères, puis concaténé.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB vers HSL est plus algorithmique. On normalise les canaux entre 0 et 1, on calcule le min et le max pour en déduire la luminosité, puis la saturation, puis la teinte selon le canal dominant. La formule complète est documentée dans la spécification CSS Color Module Level 3.

L'outil fonctionne dans les deux sens entre RGB, HEX et HSL. Pour effectuer une conversion :

1. Choisissez le format d'entrée : RGB, HEX ou HSL.
2. Saisissez la valeur (par exemple #1400B6, rgb(20, 0, 182) ou hsl(247, 100%, 36%)).
3. Lancez la conversion : les équivalents dans les deux autres formats s'affichent immédiatement.
4. Copiez le résultat voulu via le bouton dédié et collez-le dans votre feuille de style ou votre maquette.

Le calcul est effectué côté navigateur, aucune donnée n'est envoyée à un serveur.

• Design web et CSS : récupérer un HEX depuis une maquette et obtenir le HSL équivalent pour générer un état hover ou active sans dévier de la teinte.
• Identité visuelle et palette : décliner une couleur primaire en plusieurs variantes (clair, sombre, atténuée) en jouant sur la luminosité ou la saturation HSL.
• Illustration et graphisme : transposer une couleur écran (RGB) vers un code hexadécimal à transmettre à un logiciel ou un client.
• Accessibilité : convertir au format RGB pour calculer ensuite un ratio de contraste (WCAG AA exige 4.5:1 pour le texte normal) avec la couleur de fond.
• Variables CSS et préprocesseurs : alimenter des tokens de design dans un fichier SASS ou un thème Tailwind à partir d'une seule couleur de référence.

Quelques conversions complètes pour illustrer la correspondance entre les trois formats :

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

Avec canal alpha :

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

Quelle est la différence entre HEX et HEX8 ?

HEX classique encode trois canaux RGB sur six caractères (#RRGGBB). HEX8 ajoute deux caractères pour le canal alpha (#RRGGBBAA), ce qui permet de gérer la transparence dans une seule chaîne. #1400B6FF et #1400B6 donnent visuellement la même couleur, opaque.

Faut-il préférer HSL ou RGB en CSS ?

Les deux sont équivalents en rendu. HSL est plus expressif pour générer une palette cohérente ou des variantes d'état (hover, focus), parce qu'on modifie un seul paramètre perceptuel. RGB reste pratique quand on travaille avec des données issues d'un canvas ou d'un capteur.

Pourquoi mon HEX donne une teinte différente de celle attendue ?

Trois causes fréquentes : confusion entre #RGB court et #RRGGBB long (les caractères sont dupliqués, pas concaténés), erreur de copie sur un caractère, ou affichage sur un écran non calibré. Vérifiez aussi que votre CSS ne superpose pas une opacité parente qui modifie le rendu final.

À quoi sert le canal alpha de RGBA et HSLA ?

Le canal alpha contrôle l'opacité de la couleur, de 0 (totalement transparent) à 1 (totalement opaque). Il est utile pour les overlays, les ombres, les états désactivés ou les superpositions sur image. Contrairement à la propriété CSS opacity, RGBA et HSLA n'affectent que la couleur ciblée et pas ses enfants.

Peut-on convertir une couleur sans perte de précision ?

Entre RGB et HEX la conversion est exacte, les deux formats encodent la même information sur 24 bits. La conversion vers HSL implique des arrondis sur la teinte, la saturation et la luminosité ; un aller-retour RGB > HSL > RGB peut donc renvoyer une valeur décalée d'une unité sur certains canaux.

Pourquoi utiliser un convertisseur en ligne plutôt qu'une fonction maison ?

Pour un test ponctuel, prototyper une palette ou vérifier rapidement l'équivalent HEX d'une couleur HSL extraite d'une maquette, un convertisseur en ligne est immédiat. Pour un besoin programmatique récurrent, une bibliothèque comme color, chroma-js ou tinycolor2 reste plus appropriée.