Convertisseur de HSL en RGB

Ce convertisseur de HSL en RGB transforme instantanément les couleurs HSL en plusieurs formats. Réglez la teinte, la saturation, la luminosité et le canal alpha avec des curseurs précis ou des champs numériques. Cliquez ensuite sur un résultat pour le copier.

Dernière mise à jour : 23 septembre 2026

Caractéristiques clés du produit

• Conversion en temps réel en variables RGB, RGBA, HEX, HSL, HSLA et CSS

• Aperçu visuel des couleurs se met à jour lorsque vous ajustez les valeurs

• Cliquez pour copier sur n'importe quelle valeur de sortie, également avec Entrée ou Espace du clavier

• Couleurs prédéfinies pour des tests rapides (rouge, vert, bleu, jaune, cyan, magenta, noir, blanc)

• Entrée synchronisée - curseurs et champs numériques restent synchronisés

• Support du canal alpha pour le contrôle de la transparence

Ce que vous obtenez

Six formats de couleur, montrés ici pour le hsl par défaut (200, 70%, 50%) :

• RGB: rgb(38, 157, 217)

• RGBA: rgba(38, 157, 217, 1.00)

• HEX: #269DD9

• HSL: hsl(200, 70%, 50%)

• HSLA: hsla(200, 70%, 50%, 1.00)

• Variable CSS : --color: #269DD9;

Conçu pour les concepteurs et les développeurs qui ont besoin de conversions de couleurs précises sans étapes supplémentaires.

Qu'est-ce qu'un convertisseur HSL en RGB ?

Un convertisseur HSL vers RGB est un petit utilitaire qui convertit une valeur de teinte, de saturation et de luminosité en nombres correspondants de rouge, de vert et de bleu.

Il exécute une formule fixe, pas une conjecture. Donnez-lui les mêmes trois nombres deux fois et il retourne exactement le même résultat à chaque fois.

C'est différent d'un sélecteur de couleurs, qui permet à quelqu'un de sélectionner ou d'échantillonner une teinte à l'œil plutôt que de calculer mathématiquement.

• Un sélecteur de couleurs sélectionne une teinte visuellement, souvent en cliquant sur un échantillon
• Un convertisseur calcule la valeur équivalente dans un modèle de couleur différent
• Les deux siègent souvent l'un à côté de l'autre dans les logiciels de conception, mais ils font des travaux différents

La plupart des feuilles de style reposent encore sur des valeurs hexadécimales ou RGB simples. L’utilisation directe de hsl() apparaît dans moins de 1% des déclarations de couleur sur le web (HTTP Archive Web Almanac, 2022).

Les outils de conception utilisent par défaut les curseurs HSL de toute façon, puisque le modèle correspond à la façon dont les gens pensent intuitivement à la couleur. Un convertisseur devient le pont vers le format dont le code a réellement besoin.

L'outil apparaît sur le frontend (EN) d'un site, à l'intérieur d'une feuille de style ou d'un script de construction qui prépare les valeurs de couleur avant tout rendu.

Il apparaît également sur le backend (EN), dans les scripts de traitement d'image ou les pipelines de couleur qui génèrent des valeurs avant qu'un modèle ne les touche.

Quelles sont les plages de valeurs d'entrée et de sortie pour la conversion HSL en RGB ?

La teinte s’étend de 0 à 360 degrés, la saturation et la luminosité de 0 à 100 pour cent, et le convertisseur affiche des valeurs rouge, vert et bleu entre 0 et 255.

Les valeurs soumises en dehors de ces limites sont bloquées ou enveloppées plutôt que rejetées, selon l'implémentation.

Chiffres clés (CSS Color Module Level 4, W3C) :

• Teinte : 0 à 360 degrés, ou une unité d'angle équivalente
• Saturation : 0% à 100%
• Légèreté : 0% à 100%
• Sortie RGB : 0 à 255 par canal (8 bits), ou 0 à 1 normalisé

Cette échelle de 0 à 255 est la même utilisée partout où la couleur RGB apparaît, des codes hexadécimaux aux données de pixels de toile.

La sortie 8-bit est la cible par défaut simplement parce que c'est ce que les navigateurs, les formats d'image et la plupart des logiciels de conception attendent déjà.

Comment fonctionne la formule de conversion HSL en RGB ?

La formule calcule d'abord une valeur chromatique, localise la tranche de 60 degrés du cercle de teinte dans laquelle tombe l'entrée, puis déplace tout par la luminosité.

Six combinaisons différentes de rouge, vert et bleu correspondent aux six segments de 60 degrés de ce cercle.

Le chemin en six étapes :

1. Calculer le chroma à partir de la saturation et de la luminosité
2. Divisez la teinte par 60 pour trouver dans quel segment elle tombe
3. Dériver une valeur intermédiaire, souvent étiquetée X, pour ce segment
4. Attribuer chroma, X et 0 au rouge, au vert et au bleu en fonction du segment
5. Ajoutez une valeur de correspondance de luminosité à chaque canal pour le déplacer en place
6. Multipliez par 255 et arrondissez pour obtenir l'entier final RGB

C'est vraiment juste deux modèles de couleurs échangeant des places mathématiquement, plus proches en pratique que la plupart des comparaisons HSL vs RGB ne le font paraître.

Exécuter l'entrée par défaut à travers ces étapes : hsl(200, 70%, 50%) donne un chroma de 0,7, atterrit dans le segment de 180 à 240 degrés, et sort comme rgb(38, 157, 217), ou #269DD9.

Rien sur les changements mathématiques basés sur le langage de programmation. Seule la syntaxe qui l'entoure le fait.

Comment l'arrondissement et la précision sont-ils gérés dans la conversion HSL en RGB ?

Deux bibliothèques de couleurs peuvent exécuter exactement la même entrée HSL et atterrir un entier à l'écart sur une valeur de canal, et les deux seraient toujours correctes.

Cet écart provient de l'arrondissement, pas d'un bug.

D'où vient la dérive :

• La formule brute affiche des nombres à virgule flottante entre 0 et 1
• La multiplication par 255 atterrit rarement sur un nombre entier
• Certaines implémentations sont rondes, d'autres sont tronquées, et les deux sont en désaccord près du point médian

Enchaîner les conversions ne fait qu’empirer les choses. Passer de RVB à HSL et revenir à RVB peut faire dériver un canal d'un point ou deux à partir de la seule erreur accumulée en virgule flottante.

Cette petite dérive importe avant qu'une valeur ne devienne un code couleur hexadécimal, puisque l'hexadecimal n'a pas de place pour les canaux fractionnels.

Comment la conversion gère-t-elle les couleurs achromatiques et l'enveloppe de teinte ?

Deux conditions rompent le chemin normal de la formule : une saturation nulle et une valeur de teinte qui dépasse 360.

Les deux sont gérés explicitement, pas traités comme des erreurs.

Couleurs achromatiques (saturation à zéro)

Zéro saturation : la couleur n'a plus rien à décrire en termes de teinte.

Lorsque la saturation atteint 0 %, il n'y a plus d'ombre sur la roue à pointer, donc la teinte cesse de porter toute signification.

• Le rouge, le vert et le bleu ont tous la même valeur
• Cette valeur partagée est égale à la luminosité, mise à l'échelle de 0 à 255
• Hue devient ce que la spécification appelle un composant sans puissance

Une luminosité de 50% avec 0% de saturation produit un gris moyen, rgb(128, 128, 128), peu importe la valeur de teinte qui se trouve dans l'entrée.

Hue Wraparound à 360 degrés

La teinte est circulaire, donc les valeurs bouclent au lieu de s'arrêter à une limite.

Une teinte de 480 degrés se comporte exactement comme 120 degrés, et une teinte de 120 degrés négatifs se comporte exactement comme 240 degrés (W3C, CSS Color Module).

La plupart des implémentations gèrent cela avec une opération modulo avant l'exécution de la formule, repliant toute teinte hors plage dans la fenêtre de 0 à 360.

Sautez cette étape et une teinte de 400 est traitée comme une entrée cassée au lieu d'être simplement 40.

Comment convertir HSL en RGB en utilisant CSS ?

Écrivez la couleur en tant que hsl() et le navigateur la convertit en RGB en interne, sans aucune étape séparée requise.

Le moteur de rendu fait les calculs au moment où la feuille de style se charge, en utilisant sRGB comme espace de couleur cible.

La méthode classique hsl() séparée par des virgules a fonctionné dans tous les principaux navigateurs depuis plus d'une décennie.

La nouvelle syntaxe CSS (EN) supprime complètement les virgules, écrivant quelque chose comme hsl(200 80% 50%) au lieu de l'ancienne hsl(200, 80%, 50%), et elle accepte une valeur alpha optionnelle après une barre oblique (CSS Color Module Level 4 (EN), W3C). Cette forme moderne a atteint le statut Baseline largement disponible (EN) en juillet 2022.

Lorsque la conversion manuelle est toujours nécessaire :

• Contexte Canvas et WebGL attendant des valeurs RGB brutes ou des valeurs flottantes normalisées
• Exporter une valeur hexadécimale statique pour une utilisation en dehors du navigateur
• Environnements sans moteur de rendu CSS, comme les mises en page mobiles natives

Aller dans l'autre sens est tout aussi courant. Quiconque part d'une valeur RGB et veut l'équivalent HSL peut le faire passer par un convertisseur RGB en HSL au lieu d'inverser les calculs à la main.

Comment convertir HSL en RGB en JavaScript et Python ?

La même formule fonctionne dans toutes les langues. Seules la syntaxe et les plages de valeurs par défaut changent.

Implémentation de JavaScript

Pas de fonction native : la formule est écrite directement dans le script.

• Prenez la teinte, la saturation et la luminosité comme des nombres simples, des degrés et des pourcentages
• Normalisez la saturation et la luminosité à une plage de 0 à 1 avant de faire les calculs
• Multipliez le résultat final par 255 et arrondissez pour une sortie standard de 8 bits

Une douzaine de lignes de code couvrent toute la fonction. Aucune dépendance requise.

Implémentation de Python

La bibliothèque standard de Python fournit la conversion déjà construite, via le module colorsys.

colorsys.hls_to_rgb() prend ses trois arguments dans l'ordre h, l, s, et non h, s, l (Documentation Python (EN)), ce qui fait trébucher quiconque porte du code à partir d'un langage qui suit l'ordre HSL standard.

Une autre différence : colorsys s'attend à ce que la teinte, la luminosité et la saturation soient des fractions entre 0 et 1, pas des degrés ou des pourcentages.

Multipliez la teinte par 360 et les deux autres par 100 pour obtenir les numéros HSL familiers, ou divisez par ces mêmes quantités entrantes.

Devriez-vous convertir HSL en RGB manuellement ou utiliser une bibliothèque ou un outil ?

L'écriture de la formule vous-même est logique lorsque l'exécution n'a pas de dépendance disponible et que vous voulez un contrôle total sur le comportement d'arrondissement.

Atteindre une bibliothèque existante a du sens partout ailleurs, surtout une fois que l'alpha, d'autres modèles de couleurs ou l'analyse de chaînes entrent en jeu.

En l'écrivant manuellement :

• Aucune dépendance à installer, auditer ou mettre à jour plus tard
• Contrôle total sur l'arrondissement et le format de sortie
• Plus de code à tester et à maintenir à mesure que les exigences augmentent

Utiliser une bibliothèque :

• Gère les cas de bord, l'alpha et les formats de couleurs multiples dès la sortie de la boîte
• Réduit le temps de développement au-delà d'une seule conversion
• Ajoute une dépendance et un poids de paquet au projet

La taille du paquet varie beaucoup entre les bibliothèques construites pour ce travail. tinycolor2 est livré à environ 5Ko gzippé, chroma-js à 13.7Ko, et color2k à 2.8Ko, selon la comparaison de taille publiée par color2k (color2k, documentation du paquet npm).

L'ampleur de cette commodité se voit dans les chiffres d'adoption. color-convert à lui seul enregistre environ 200 millions de téléchargements hebdomadaires sur le registre npm (données du paquet Snyk, 2025), beaucoup plus de trafic que les mathématiques des couleurs d'un seul projet ne justifieraient jamais l'écriture à partir de zéro.

Où la conversion HSL en RGB est-elle réellement utilisée ?

La conversion se trouve tranquillement derrière presque tout ce qui permet à quelqu'un de choisir une couleur visuellement, puis d'expédier cette couleur en tant que code.

Quatre endroits représentent la majeure partie de ce trafic.

Logiciel de conception :

• Figma, Photoshop et Sketch exposent les curseurs HSL ou HSB car les modèles basés sur la teinte correspondent à la façon dont les utilisateurs ajustent intuitivement les couleurs
• Chaque glisser du curseur est converti en RGB au moment où il doit être rendu ou exporté

Feuilles de style et jetons de conception :

Le système de thèmes de shadcn/ui a longtemps stocké chaque couleur en tant que numéros de composants HSL bruts, quelque chose comme 222.2 47.4% 11.2% pour une couleur primaire, puis a enveloppé cette valeur dans hsl() au moment de l'utilisation. Ses thèmes Tailwind v4 ont depuis été déplacés vers OKLCH (documentation shadcn/ui).

De toute façon, le modèle permet à un système de conception entier de déplacer la teinte ou la saturation sur des dizaines de composants en modifiant une seule variable.

Traitement de l'image :

• Pillow et GIMP ajustent la teinte ou la luminosité par programme, puis convertissent à nouveau en RGB avant d'enregistrer un fichier
• Les scripts par lots qui recolorent les photos de produits en vrac exécutent généralement ce chemin exact

Les bibliothèques de graphiques s'appuient sur elle aussi. Ils génèrent un éventail de teintes à une saturation et une luminosité fixes, puis convertissent chacune en RGB pour les pixels qui atteignent réellement l’écran.

Quand la conversion HSL en RGB ne s'applique-t-elle pas ou produit-elle des résultats incorrects ?

La formule elle-même ne se brise jamais. Ce qui est cassé, c'est l'hypothèse que sa sortie représente toutes les couleurs qu'un écran peut montrer.

Là où il manque :

• Large gamme de couleurs : HSL est construit sur sRGB, et Display P3 couvre environ 50% plus d'espace de couleur que sRGB (WebKit, 2020). Tout ce qui se trouve dans cette plage supplémentaire n'a pas de chemin HSL à RGB précis
• HSL confondu avec HSV ou HSB : les lettres sont similaires, mais les formules diffèrent, et l'exécution d'une valeur HSV à travers une formule HSL produit la mauvaise couleur entièrement
• Entrée non normalisée : passer 50 au lieu de 0.5 pour la saturation dans une fonction attendant une échelle de 0 à 1 renvoie une valeur bien en dehors de toute plage utilisable
• Alpha silencieusement abandonné : la conversion de HSLA en RGB sans porter le canal alpha en avant produit une couleur opaque où la transparence était attendue

Le canal de légèreté a son propre point faible connu. La spécification CSS Color Module Level 4 utilise le bleu et le jaune à la même luminosité de 50 % que son propre exemple, et les deux nuances ne semblent pas équivalentes à l'œil humain (W3C, CSS Color Module Level 4).

Cet écart entre la légèreté numérique et la légèreté perçue est la raison pour laquelle des espaces de couleur plus récents comme Oklch existent. Ce n'est pas un défaut spécifique à n'importe quel convertisseur.

Rien de tout cela ne rend la conversion peu fiable. Cela signifie que la conversion répond à une question plus étroite que ce à quoi ressemble une couleur sur tous les écrans possibles.

Questions fréquentes : Convertisseur de HSL en RGB

Que signifient les lettres HSL et RGB ?

HSL signifie teinte, saturation et luminosité, les canaux décrivant la position d'une couleur sur la roue, son intensité et sa luminosité. RGB signifie rouge, vert et bleu, les canaux additifs d'un écran s'allument pour afficher cette couleur.

Le HSL est-il identique au HSV ou au HSB ?

HSV et HSB désignent le même modèle, en utilisant la valeur ou la luminosité comme troisième canal au lieu de la luminosité. Une valeur de saturation de 100 % signifie une teinte différente dans chaque modèle, de sorte que l’exécution d’une valeur HSV via une formule HSL renvoie la mauvaise couleur.

HSLA peut-il être converti en RGBA de la même manière ?

Oui. Les canaux de teinte, de saturation et de luminosité se convertissent exactement comme le HSL standard, et le canal alpha est transmis directement sans changement, puisque les deux formats expriment la transparence de la même manière, sous forme de décimale entre 0 et 1 ou d'un pourcentage correspondant.

Pouvez-vous convertir HSL directement en code hexadécimal ?

Oui, bien que cela se passe en deux étapes. La formule produit d'abord RGB, puis chacune des trois valeurs de 0 à 255 devient une paire hexadécimale à deux chiffres, donnant le code hexadécimal à six caractères utilisé dans les outils CSS et de conception.

Où les mathématiques d'un convertisseur HSL vers RGB cessent-elles d'être suffisantes ?

La formule d'un convertisseur HSL vers RGB cesse d'être suffisante à la limite de l'espace de couleur sRVB, puisque l'algorithme mappe la teinte, la saturation et la luminosité sur les 16,7 millions de couleurs que sRVB peut exprimer.

hsl() est entièrement pris en charge par les navigateurs, mais il apparaît toujours dans moins de 1 % des déclarations de couleurs en 2022 (HTTP Archive Web Almanac, 2022). Une prise en charge native complète associée à une utilisation directe négligeable montre où la conversion se produit réellement : à l'intérieur des outils de conception et des bibliothèques en amont de la feuille de style.

La sortie 8 bits standard couvre ces mêmes 16,7 millions de couleurs. Les flux de travail à large gamme passent à 16 bits par canal pour conserver des dégradés lisses sur un espace de couleur plus grand (Apple Developer, WWDC 2017), donc accepter les mathématiques 8 bits achète une compatibilité universelle et abandonne la précision supplémentaire que ces écrans peuvent afficher.

L'envoi de cette sortie RGB à l'impression nécessite une conversion supplémentaire, puisque les imprimantes utilisent des primaires différents, gérés par un convertisseur RGB en CMYK.