Calculateur de conversion RGB ↔ HSL
Rédigé par Thierno Sadou Diallo, formule vérifiée selon notre méthodologie • Mis à jour le 24/08/2026
Le modèle RGB décrit une couleur par un mélange de rouge, vert et bleu (0-255 chacun), tandis que le modèle HSL la décrit par sa teinte (0-360°), sa saturation et sa luminosité (en %). Le rouge pur RGB(255, 0, 0) correspond à HSL(0°, 100%, 50%).
Explication
Le modèle RGB décrit une couleur telle qu'elle est physiquement produite par un écran, en mélangeant des intensités de lumière rouge, verte et bleue — c'est le modèle natif de l'affichage numérique, mais il ne correspond pas directement à la façon dont un humain perçoit ou décrit intuitivement une couleur. Le modèle HSL (teinte, saturation, luminosité) répond à ce besoin en reformulant la même information sous trois axes plus intuitifs : la teinte (H) identifie la couleur pure sur le cercle chromatique (0° pour le rouge, 120° pour le vert, 240° pour le bleu), la saturation (S) indique à quel point cette couleur est vive ou au contraire délavée vers le gris, et la luminosité (L) indique à quel point elle est claire ou sombre, du noir (0%) au blanc (100%) en passant par la couleur pure à 50%. C'est pourquoi HSL est souvent préféré aux designers pour ajuster une palette de façon prévisible — assombrir une couleur en HSL revient simplement à réduire L, sans changer sa teinte perçue, alors que la même opération en RGB demande de recalculer les trois composantes simultanément. Ce calculateur complète notre calculateur de conversion RGB vers hexadécimal, qui traduit RGB dans sa notation compacte utilisée en CSS et en design (#RRGGBB), un troisième format équivalent au RGB décimal, simplement écrit en base seize.
Exemple : convertir un bleu moyen de RGB vers HSL
Données d'entrée
Rouge : 75. Vert : 148. Bleu : 219.
Calcul
La composante bleue est dominante (max), ce qui place la teinte dans la zone bleue du cercle chromatique : H ≈ 210°. La saturation atteint environ 67%, et la luminosité environ 58%.
Résultat
Cette couleur RGB(75, 148, 219) correspond à HSL(210°, 67%, 58%) — un bleu moyen, assez saturé, ni très clair ni très sombre.
Questions fréquentes
Pourquoi obtient-on parfois un léger écart en refaisant la conversion dans l’autre sens ?
Parce que les composantes RGB finales sont arrondies à l'entier le plus proche (0 à 255 étant par définition des valeurs entières), alors que les valeurs HSL intermédiaires peuvent comporter des décimales. Un aller-retour RGB→HSL→RGB reste néanmoins exact la plupart du temps, comme le montre le troisième cas de test de ce calculateur ; un écart d'une unité peut apparaître occasionnellement sur certaines couleurs, sans conséquence visuelle perceptible.
Que représente une saturation de 0% ?
Une saturation de 0% signifie l'absence totale de couleur : quelle que soit la teinte choisie, le résultat sera une nuance de gris pur, du noir au blanc selon la luminosité. C'est pourquoi la teinte devient sans effet visuel dès que la saturation atteint 0% — c'est la luminosité seule qui détermine alors le résultat.
Le modèle HSL est-il identique au modèle HSV (ou HSB) ?
Non, ce sont deux modèles proches mais distincts : HSL utilise la luminosité (L), où la couleur pure se situe à 50% (0% étant le noir, 100% le blanc), tandis que HSV/HSB utilise la valeur (V), où la couleur pure se situe à 100% et où seule une saturation ou une valeur réduite assombrit la couleur. Les formules de conversion diffèrent entre les deux modèles ; ce calculateur ne traite que le HSL, le plus utilisé en CSS et en conception web — un choix de couleur de texte via HSL doit ensuite être vérifié avec notre calculateur de ratio de contraste WCAG pour garantir une lisibilité suffisante.