Convertisseur HEX vers HSL Convertissez les codes de couleur HEX en valeurs HSL (Teinte, Saturation, Luminosité).
Convertisseur HEX vers HSL
Convertissez les codes de couleur HEX en valeurs HSL (Teinte, Saturation, Luminosité).
Entrez une couleur HEX
Tapez un code de couleur HEX ou utilisez le sélecteur de couleurs pour choisir votre couleur.
Lisez les valeurs HSL
Voyez les valeurs Teinte (0-360°), Saturation (0-100%) et Luminosité (0-100%) instantanément.
Copiez la sortie HSL
Copiez la valeur de la fonction CSS hsl() pour l'utiliser directement dans vos feuilles de style.
What Is Convertisseur HEX vers HSL?
Un convertisseur HEX vers HSL transforme des codes de couleur hexadécimaux en modèle de couleur HSL (Teinte, Saturation, Luminosité). Contrairement au RGB qui décrit les couleurs en mélangeant la lumière rouge, verte et bleue, le HSL décrit les couleurs d'une manière plus intuitive pour les humains. La teinte est la couleur elle-même (mesurée en degrés autour d'une roue des couleurs : 0° correspond au rouge, 120° au vert, 240° au bleu). La saturation décrit l'intensité ou la pureté de la couleur (0% correspond au gris, 100% à une couleur entièrement vive). La luminosité décrit à quel point la couleur est claire ou foncée (0% correspond au noir, 50% à la couleur pure, 100% au blanc). Cela rend le HSL inestimable pour créer des palettes de couleurs, ajuster la luminosité sans modifier la teinte et générer des schémas de couleurs harmonieux. Les designers et les développeurs ont souvent besoin de convertir du HEX (le format standard Web) en HSL pour effectuer des ajustements significatifs. Par exemple, créer une nuance plus foncée est trivial en HSL - il suffit de réduire la luminosité - alors que dans le HEX ou le RGB, vous devriez ajuster les trois canaux proportionnellement.
Why Use Convertisseur HEX vers HSL?
-
Voyez la couleur décomposée en composants intuitifs de teinte, saturation et luminosité
-
Aperçu de la couleur mis à jour en temps réel lorsque vous tapez le code HEX
-
Sortie prête pour CSS avec la fonction hsl() pour une utilisation directe dans les feuilles de style
-
Prend en charge les codes HEX à 3 et 6 chiffres
-
Utile pour comprendre et manipuler les relations entre couleurs
Common Use Cases
Conception de palette de couleurs
Convertissez les couleurs HEX de votre marque en HSL pour créer facilement des variations en ajustant la saturation et la luminosité.
Génération de thèmes
Créez des variantes de thème clair et sombre en modifiant la valeur de luminosité tout en conservant la teinte constante.
Propriétés personnalisées CSS
Stockez les valeurs HSL comme variables CSS pour un thème de couleur flexible : --primary-h, --primary-s, --primary-l.
Ajustements d'accessibilité
Ajustez les valeurs de luminosité pour assurer des rapports de contraste suffisants entre le texte et les arrières-plans.
Technical Guide
La conversion de HEX à HSL commence par décoder la chaîne hexadécimale en valeurs RVB (0-255), puis transforme en HSL. L'algorithme normalise les valeurs RVB dans une plage de 0 à 1, trouve les valeurs maximales et minimales des canaux, et calcule : La luminosité = (max + min) / 2. Si max est égal à min, la couleur est achromatique (gris) avec une teinte = 0 et une saturation = 0. Sinon, la Saturation = delta / (1 - |2L - 1|) où delta = max - min. La teinte dépend du canal qui est maximum : si le rouge est maximum, H = (G-B)/delta ; si le vert est maximum, H = (B-R)/delta + 2 ; si le bleu est maximum, H = (R-G)/delta + 4. Le résultat est multiplié par 60 pour convertir en degrés (0-360). Le HSL est une représentation cylindrique du cube RVB, ce qui le rend plus intuitif pour la manipulation des couleurs. Une distinction importante : la luminosité HSL de 50% représente la forme la plus vive de n'importe quelle teinte, tandis que 0% correspond toujours au noir et 100% au blanc. Cela diffère du HSV/HSB où une valeur (luminosité) de 100% représente la couleur la plus vive.
Tips & Best Practices
-
1Une luminosité HSL de 50% donne la version la plus pure de n'importe quelle teinte - utile pour les couleurs de base
-
2La désaturation (réduction de S) crée des tons professionnels et atténués
-
3HSL est idéal pour le thème CSS car la teinte, la saturation et la luminosité sont ajustables indépendamment
-
4Des valeurs R, G, B égales en HEX produisent toujours H=0, S=0 en HSL (gris pur)
-
5Le CSS moderne prend en charge hsl() de manière native dans tous les navigateurs - aucune conversion n'est nécessaire à l'exécution
Related Tools
Convertisseur HEX vers RGB
Convertissez les codes de couleur HEX en valeurs RVB instantanément avec un aperçu de couleur interactif.
🎨 Color Tools
Convertisseur HSL en HEX
Convertissez les valeurs de couleur HSL en codes HEX avec des curseurs interactifs.
🎨 Color Tools
Convertisseur RGB en HSL
Convertissez les valeurs RVB en format de couleur HSL avec des curseurs interactifs.
🎨 Color Tools
Sélecteur de couleurs
Sélecteur de couleurs interactif avec sorties HEX, RGB, HSL et CMYK.
🎨 Color Tools
Générateur de nuances de couleur
Générer des nuances plus foncées de n'importe quelle couleur avec un nombre d'étapes ajustable.
🎨 Color ToolsFrequently Asked Questions
Q Qu'est-ce que le modèle de couleur HSL ?
Q Pourquoi convertir HEX en HSL ?
Q hsl() est-il pris en charge dans CSS ?
Q Comment assombrir une couleur HEX à l'aide de HSL ?
Q Quelle est la différence entre HSL et HSV ?
About This Tool
Convertisseur HEX vers HSL is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.