Convertir RGB en HSL
Convertisseur RGB en HSL redécrit trois canaux de couleur en un angle, une saturation et une luminosité. Seuls le canal le plus grand et le plus petit comptent : leur point médian est la luminosité, l’écart entre eux est la chroma, et celui des deux qui est le plus grand choisit le secteur de 60° où tombe la teinte. La position du canal du milieu dans ce secteur donne l’angle exact.
Saisissez une couleur à gauche. Les valeurs hexadécimales avec ou sans dièse sont acceptées, rgb(), hsl(), oklch() ainsi que les noms de couleurs CSS.
Comment fonctionne Convertir RGB en HSL ?
Toute la conversion repose sur deux nombres : le canal le plus grand et le plus petit. Mettez les trois à l’échelle 0–1, puis la luminosité est le point médian de ces deux-là et la chroma la distance entre eux. Si la chroma est nulle, les trois canaux sont égaux, la couleur est un gris, et il n’y a aucune teinte à calculer.
Le canal le plus grand choisit le secteur
La roue se découpe en six secteurs de 60°. Rouge le plus grand vous place dans le secteur allant du magenta au jaune ; vert le plus grand, celui du jaune au cyan ; bleu le plus grand, du cyan au magenta. L’endroit exact où vous tombez dépend du canal du milieu : pour un maximum rouge, l’angle vaut ((G − B) / chroma) × 60, et pour les deux autres la même expression avec un décalage de 2 ou 4 secteurs.
Cette expression peut sortir négative — quand le bleu dépasse le vert sur une couleur à dominante rouge — et c’est pourquoi toute implémentation correcte ajoute 360 et prend le reste. Une implémentation qui saute ce réenroulement renvoie une teinte négative pour environ un sixième de toutes les couleurs, et le bug est invisible jusqu’à ce que quelque chose en aval essaie de trier par là.
La saturation se mesure à ce qui est possible
La saturation n’est pas la chroma brute ; c’est la chroma divisée par la chroma maximale que la luminosité autorise, soit 1 − |2L − 1|. Ce dénominateur tend vers zéro aux deux extrêmes, donc une couleur quasi noire ou quasi blanche avec un minuscule écart entre canaux se déclare fortement saturée. C’est correct, et ce n’est pas ce que la plupart des gens attendent du nombre.
Ce pour quoi HSL est bon, et ce pour quoi il ne l’est pas
C’est une bonne notation pour un humain. «Même couleur, moins saturée» et «même couleur, un peu plus sombre» sont des retouches à un nombre en HSL et à trois nombres en RGB, et un curseur de teinte n’a de sens que dans un espace polaire. C’est un vrai avantage, et c’est pourquoi HSL a survécu.
C’est une mauvaise base pour l’arithmétique. Son axe de luminosité pèse les trois canaux également, alors que la vision humaine pèse le vert environ dix fois plus que le bleu, si bien que des luminosités égales en nombre ne paraissent pas également claires. Tout dégradé, mélange ou jugement de contraste construit sur HSL hérite de cette erreur. OKLCH est la même forme de notation — angle, chroma, luminosité — avec un axe qui colle à ce que l’œil perçoit, et il figure dans le résultat ci-dessous.
Canaux RGB
rgb(255 136 0)
Teinte, saturation, luminosité
hsl(32 100% 50%) max = 255 (red) → 1.000 min = 0 (blue) → 0.000 chroma = 1.000 lightness = (1.000 + 0.000) / 2 = 50% hue = ((0.533 − 0.000) / 1.000) × 60 = 32°
Quelles options et quels cas limites Convertir RGB en HSL prend en charge ?
| Paramètre | Type | Valeur par défaut | Comportement et cas limites |
|---|---|---|---|
| max, min | 0–1 | — | La plus grande et la plus petite des trois composantes mises à l’échelle. Tout le reste se déduit de ces deux valeurs. |
| Chroma | max − min | — | La distance entre la couleur et le gris. Zéro signifie un gris, et la teinte n’est alors pas définie. |
| Luminosité | (max + min) / 2 | — | Le point milieu. Notez qu’il ignore de quelles composantes il s’agit — c’est de là que vient le problème perceptif de HSL. |
| Saturation | chroma / (1 − |2L − 1|) | — | Chroma par rapport au maximum disponible à cette luminosité — ce n’est pas une mesure absolue. |
| Teinte (maximum rouge) | ((G − B) / C) × 60 | — | Peut être négatif quand B > G ; ajoutez 360 et prenez le reste. |
| Teinte (maximum vert) | ((B − R) / C + 2) × 60 | — | La même expression, décalée de deux secteurs. |
| Teinte (maximum bleu) | ((R − G) / C + 4) × 60 | — | Décalée de quatre secteurs. |
| Gris | C = 0 | teinte 0 | Signalé comme 0 plutôt que comme ce que l’arithmétique produit à partir de trois nombres égaux. |
Questions fréquentes
Comment convertir du RGB en HSL ?
Divisez chaque canal par 255. Prenez le plus grand et le plus petit : la luminosité est leur point médian et la chroma leur différence. Si la chroma est nulle, la couleur est un gris et c’est fini. Sinon, la saturation vaut chroma / (1 − |2L − 1|), et la teinte dépend du canal le plus grand : rouge donne ((G − B) / chroma) × 60, vert donne ((B − R) / chroma + 2) × 60, bleu donne ((R − G) / chroma + 4) × 60. Ajoutez 360 et prenez le reste si le résultat est négatif.
Pourquoi ma teinte sort-elle négative ?
Parce que la branche du maximum rouge soustrait le bleu du vert, et quand le bleu est le plus grand des deux, le résultat passe sous zéro. Le correctif, c’est le modulo que possède toute implémentation correcte : ajoutez 360 et prenez le reste. Cela touche environ un sixième de l’espace colorimétrique — le côté magenta du rouge — et passe généralement inaperçu jusqu’à ce que quelque chose essaie de trier ou d’interpoler par teinte.
Que mesure réellement la saturation en HSL ?
La chroma relativement à la chroma maximale que la luminosité peut contenir, pas la chroma elle-même. Voilà pourquoi rgb(2 0 0) — presque noir — affiche 100% de saturation : dans ce qui est possible à 0.4% de luminosité, c’est aussi coloré qu’une couleur peut l’être. Si vous voulez une mesure absolue de la coloration, c’est ce qu’est la chroma d’OKLCh.
HSL est-il meilleur que RGB pour le CSS ?
Pour l’édition à la main, souvent oui : désaturer ou assombrir se joue sur un nombre au lieu de trois, et une teinte est quelque chose que l’on peut raisonner. Pour tout ce qui est généré — une échelle, un dégradé, un état interpolé — c’est pire qu’il n’y paraît, car sa luminosité n’est pas perceptuelle et des nombres régulièrement espacés donnent des couleurs irrégulièrement espacées. Utilisez-le là où un humain le tape, et OKLCH là où un programme le calcule.
La conversion perd-elle quelque chose ?
Pas mathématiquement — HSL et RGB décrivent exactement le même ensemble de couleurs et l’application est réversible. La précision se perd dans la façon d’écrire le résultat : une teinte en nombre entier et un dixième de pourcent ne peuvent distinguer chacune des 16.7 millions de valeurs sRGB, donc deux couleurs peuvent s’afficher avec le même HSL. Les valeurs ici portent assez de décimales pour faire un aller-retour exact.
Pourquoi deux couleurs très différentes affichent-elles la même teinte ?
Parce que la teinte ne note que la direction d’une couleur, pas la quantité qu’il y en a. rgb(255 0 0) et rgb(40 30 30) sont tous deux à la teinte 0 et diffèrent entièrement en saturation et en luminosité. Cette séparation est tout l’intérêt de HSL — un axe pour la couleur en question, deux pour l’intensité et la clarté — et c’est pourquoi une couleur presque grise peut encore afficher une teinte qui a l’air sûre d’elle.
Quels outils liés devriez-vous utiliser ensuite ?
- Convertir des couleursHEX, RGB, HSL, HSV, OKLCH et CMYK dans les deux sens à la fois
- Convertir HEX en RGBTransforme une couleur hex en rgb(), canal alpha compris
- Convertir RGB en HEXTransforme des valeurs rgb() en hex à 3, 6 ou 8 chiffres
- Convertir HEX en HSLTransforme une couleur hex en teinte, saturation et luminosité