Conçu sur une IA avancée exécutée sur votre appareil et l'accélération matérielle, pour des performances professionnelles sans compromis sur la confidentialité.IA sur votre appareil : performant et privé.
Convertisseur RGB vers HSL
RGB vers HSL pour vos thèmes : teinte, saturation, luminosité.
- Fonctionne sur votre appareil
- La teinte survit sur les gris
- Aussi OKLCH, LAB et CMYK
Déposez une feuille de style ou un fichier de tokens
CSS, SCSS, SASS, LESS, JSON, SVG ou TXT — jusqu'à 10.0 MB
#FF4D4D
Nom de couleur le plus proche: tomato (Même famille, distance 6.4)
rgb(255 77 77)hsl(0 100% 65.1%)- HEX
#FF4D4D - RGB
rgb(255 77 77) - HSL
hsl(0 100% 65.1%) - HWB
hwb(0 30.2% 0%) - HSV
hsv(0 69.8% 100%)Pas du CSS - CMYK
cmyk(0% 69.8% 69.8% 0%)Pas du CSS - LAB
lab(59.906 67.771 41.299) - LCH
lch(59.906 79.363 31.36) - OKLAB
oklab(0.673 0.19441 0.09082) - OKLCH
oklch(0.673 0.21457 25.04) - Display P3
color(display-p3 0.9239 0.3574 0.3319) - XYZ D65
color(xyz-d65 0.45232 0.27107 0.09872)
Contraste
- AA normalÉchec
- AA grandRéussi
- AAA normalÉchec
- AAA grandÉchec
- AA normalRéussi
- AA grandRéussi
- AAA normalÉchec
- AAA grandRéussi
- AA normalÉchec
- AA grandRéussi
- AAA normalÉchec
- AAA grandÉchec
Nuance conforme la plus proche — #E22D35 atteint 4.51:1 face à votre couleur de comparaison.
Vision des couleurs
L'apparence de cette couleur pour les personnes ayant chaque type de déficience de la vision des couleurs.
- Vision typique
- Protanopie
- Deutéranopie
- Tritanopie
- Aucune vision des couleurs
Toute syntaxe de couleur CSS, plus cmyk() et hsv().
Les valeurs saisies ici restent en place, même quand la couleur n'a aucune teinte pour les afficher.
Comment convertir RGB en HSL
Saisir les valeurs RVB
Rouge, Vert, Bleu (0–255 chacun) via curseurs ou champs.
Voir le résultat HSL
Teinte (0–360°), saturation et luminosité (0–100 %) se mettent à jour automatiquement.
Copier ou utiliser
Copiez les valeurs HSL pour le CSS, vos outils de design ou des retouches.
Pourquoi convertir RVB en HSL ?
Le passage au HSL facilite la manipulation des couleurs : luminosité et saturation plus simples à ajuster, choix plus intuitif et flux de design amélioré.
Avantages du format HSL
- Choix intuitif : Représentation souvent plus naturelle
- Réglages faciles : Luminosité et saturation simples à modifier
- Outils de design : Courant dans les applications créatives
- Variations : Plus simple de créer des déclinaisons
- Lecture visuelle : Mieux comprendre les relations entre couleurs
RVB vs HSL : les différences
Comprendre RVB et HSL aide à choisir le bon format.
Caractéristiques du RVB
- Valeurs Rouge, Vert, Bleu
- Chaque composante de 0 à 255
- Contrôle précis par canal
- Standard pour le design numérique
- Compatible avec tous les outils de design
Caractéristiques du HSL
- Modèle teinte, saturation, luminosité
- Représentation intuitive
- Luminosité et saturation faciles à ajuster
- Répandu dans les outils de design
- Souvent plus parlant pour le choix des couleurs
Pourquoi la luminosité HSL n'est pas ce que voit l'œil
HSL est le modèle colorimétrique le plus simple à raisonner et le moins fiable pour construire une palette. La raison mérite d'être connue avant d'y engager un thème.
- 50 % de luminosité n'est pas une seule clarté — hsl(60 100% 50%) est un jaune vif et hsl(240 100% 50%) un bleu sombre. Même nombre, clarté perçue très différente : une rampe fondée dessus est irrégulière.
- Éclaircir décale la teinte — Augmentez la luminosité d'un bleu en HSL et il dérive vers le violet. OKLCH a été conçu exactement pour cela, et cette page affiche les deux pour comparer.
- Le gris n'a aucune teinte — À 0 % de saturation la teinte est indéfinie, pas nulle. Cette page conserve la teinte saisie au lieu de la remettre à zéro, pour que vous puissiez fixer la teinte puis ajouter la saturation.
- La saturation se comporte autrement aux extrémités — Quand la luminosité approche 0 % ou 100 %, toute saturation converge vers le noir ou le blanc : c'est pourquoi les petites modifications semblent sans effet.
Quand convertir RVB en HSL
Quand vous voulez manipuler les couleurs plus intuitivement ou ajuster saturation et luminosité.
Cas d’usage typiques
- Création : HSL pour des ajustements plus souples
- Variations : Créer des déclinaisons plus facilement
- Luminosité : Éclaircir ou assombrir de façon intuitive
- Saturation : Contrôler l’intensité de la couleur
- Outils : HSL dans les logiciels de design
À savoir sur RVB → HSL
Repères utiles pour bien convertir.
Points clés
- HSL : teinte 0–360°, saturation et luminosité 0–100 %
- RVB : rouge, vert, bleu de 0 à 255 chacun
- La conversion conserve la couleur
- Le HSL facilite souvent le choix des teintes
- Le RVB reste précis pour le contrôle par canal
Bonnes pratiques
Pour des conversions RVB → HSL fiables.
Qualité
- Vérifiez les valeurs RVB avant conversion
- Respectez 0–255 par composante
- Contrôlez la cohérence des valeurs HSL
- Testez dans l’application cible
- Tenez compte de l’espace colorimétrique et du gamut
Quand ne pas convertir
- Si le RVB suffit pour votre usage
- Gardez le RVB quand l’application l’exige
- Évitez la conversion si le format importe peu
- Ne convertissez pas si la cible ne gère pas le HSL
Limites et compatibilité
Exécution dans l'appareil ; JavaScript et appareil récent requis.
Propulsé par des algorithmes de traitement d'image optimisés.
Les autres convertisseurs de couleur
Questions fréquentes
Comment fonctionne le convertisseur RGB vers HSL ?
Saisissez Rouge, Vert et Bleu (0-255) avec les curseurs ou les champs et l'outil les convertit en Teinte (0-360 degrés), Saturation (0-100%) et Luminosité (0-100%). Un aperçu se met à jour instantanément et vous pouvez copier les valeurs HSL pour le CSS ou les outils de conception.
Qu'est-ce que le HSL et pourquoi l'utiliser ?
Le HSL décrit la couleur par la Teinte (la couleur sur une roue de 360 degrés), la Saturation (son intensité) et la Luminosité (sa clarté). Il correspond à la façon dont on pense la couleur, ce qui facilite l'ajustement du ton ou la création de variations de thème plutôt que de modifier des nombres RGB bruts.
La conversion RGB vers HSL perd-elle des informations ?
Non. Le HSL et le RGB décrivent la même couleur dans des coordonnées différentes, donc la conversion est réversible et sans perte. Convertissez en HSL, ajustez les valeurs et vous pouvez revenir au RGB ou au HEX sans dégrader la couleur.
Quelles plages utilisent les valeurs HSL ?
La Teinte va de 0 à 360 degrés autour de la roue chromatique, tandis que la Saturation et la Luminosité sont des pourcentages de 0 à 100. Le convertisseur affiche les résultats exactement dans ces plages, comme la syntaxe hsl() utilisée en CSS.
Comment ajuster les couleurs avec le HSL ?
Modifiez la Teinte pour passer à une autre couleur, augmentez ou diminuez la Saturation pour la rendre plus vive ou plus douce, et ajustez la Luminosité pour éclaircir ou assombrir. Cela rend le HSL idéal pour créer des teintes, des nuances et des échelles de couleurs d'interface cohérentes.
L'outil est-il gratuit, privé et disponible hors ligne ?
Oui. Le convertisseur est entièrement gratuit, et chaque calcul s'exécute localement sur votre appareil : vos couleurs ne sont jamais envoyées. Il fonctionne sur mobile et ordinateur et continue de fonctionner après le chargement de la page.
sur 334 notes
Notez cet outil
Touchez une étoile — c’est rapide