Skip to main content

Convertisseur HEX vers HSL Convertissez les codes de couleur HEX en valeurs HSL (Teinte, Saturation, Luminosité).

Convertisseur HEX vers HSL illustration
🎨

Convertisseur HEX vers HSL

Convertissez les codes de couleur HEX en valeurs HSL (Teinte, Saturation, Luminosité).

1

Entrez une couleur HEX

Tapez un code de couleur HEX ou utilisez le sélecteur de couleurs pour choisir votre couleur.

2

Lisez les valeurs HSL

Voyez les valeurs Teinte (0-360°), Saturation (0-100%) et Luminosité (0-100%) instantanément.

3

Copiez la sortie HSL

Copiez la valeur de la fonction CSS hsl() pour l'utiliser directement dans vos feuilles de style.

Loading tool...

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

  • 1
    Une luminosité HSL de 50% donne la version la plus pure de n'importe quelle teinte - utile pour les couleurs de base
  • 2
    La désaturation (réduction de S) crée des tons professionnels et atténués
  • 3
    HSL est idéal pour le thème CSS car la teinte, la saturation et la luminosité sont ajustables indépendamment
  • 4
    Des valeurs R, G, B égales en HEX produisent toujours H=0, S=0 en HSL (gris pur)
  • 5
    Le 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

Frequently Asked Questions

Q Qu'est-ce que le modèle de couleur HSL ?
HSL signifie Teinte (angle de couleur 0-360°), Saturation (intensité 0-100%) et Luminosité (luminosité 0-100%). Il s'agit d'une représentation cylindrique qui est plus intuitive pour les humains que RGB.
Q Pourquoi convertir HEX en HSL ?
HSL facilite la création de variations de couleurs. Vous pouvez éclaircir, assombrir ou désaturer une couleur en modifiant une seule valeur, alors qu'en HEX vous devriez modifier les six caractères.
Q hsl() est-il pris en charge dans CSS ?
Oui, hsl() est pris en charge dans tous les navigateurs modernes et l'a été depuis IE9. Le CSS moderne prend également en charge la syntaxe récente avec des espaces : hsl(217 91% 60%).
Q Comment assombrir une couleur HEX à l'aide de HSL ?
Convertissez HEX en HSL, puis réduisez la valeur de luminosité. Par exemple, hsl(217, 91%, 60%) assombri à hsl(217, 91%, 40%) crée une nuance plus sombre du même bleu.
Q Quelle est la différence entre HSL et HSV ?
HSL et HSV utilisent tous deux la teinte et la saturation, mais diffèrent dans le troisième composant. HSL utilise la luminosité (50% est la couleur pure), tandis que HSV utilise la valeur/luminosité (100% est la couleur pure). HSL est plus couramment utilisé dans CSS.

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.