Développeur 🔒 Fonctionne dans votre navigateur — aucune donnée envoyée

Convertisseur HEX en HSL

Transformez un code couleur HEX en teinte, saturation et luminosité, la notation qui simplifie la création de variantes.

Couleur d'entrée

Sélecteur :

Saisissez une couleur à convertir...

Comment Utiliser

Saisissez ou collez un code HEX comme #0A84FF ou #F80.
Lisez la valeur hsl() dans la liste « Formats » et copiez-la.
Ouvrez l'onglet « Palette » pour obtenir une échelle 50–950 qui garde la teinte et fait varier la luminosité.
Vérifiez chaque variante sur son fond dans l'onglet « Contraste ».

Questions Fréquentes

Que signifie HSL ?

Hue, Saturation, Lightness : teinte, saturation et luminosité. La teinte est un angle sur le cercle chromatique, de 0 à 360, la saturation indique l'intensité de la couleur, et la luminosité sa proximité avec le noir ou le blanc.

Pourquoi ma valeur HSL diffère-t-elle d'une unité de celle d'un autre outil ?

Les valeurs HSL sont calculées avec des décimales puis arrondies. #0A84FF a une teinte de 210,1 : selon leur méthode d'arrondi, les outils affichent 210 ou 211. Les deux décrivent pratiquement la même couleur.

La conversion HEX en HSL est-elle sans perte ?

Mathématiquement oui, mais l'arrondi à des nombres entiers peut décaler une couleur d'une fraction de palier. Reconvertir le HSL arrondi peut donner un code HEX décalé d'une ou deux unités.

Puis-je utiliser hsl() en CSS ?

Oui. Tous les navigateurs actuels prennent en charge hsl() et hsla(), y compris la syntaxe moderne séparée par des espaces.

Convertir des couleurs HEX en HSL

Mis à jour le 24 septembre 2026 · Par Saman

Les codes HEX sont compacts mais peu parlants : personne ne sait, en regardant #0A84FF, comment l'assombrir de 10 %. HSL décrit la même couleur comme on se la représente : un état survolé, un état désactivé ou une variante pour le mode sombre se résume alors à modifier un seul nombre.

Cette page ouvre le convertisseur de couleurs avec la saisie HEX sélectionnée et un exemple chargé.

Une couleur HEX, ce sont trois paires de chiffres hexadécimaux pour le rouge, le vert et le bleu. #0A84FF vaut rgb(10, 132, 255), et la même couleur écrite en HSL donne hsl(210, 100%, 52%).

Lire une valeur HSL

Composante	Plage	Dans hsl(210, 100%, 52%)
Teinte	0–360°	210° : un bleu entre le cyan (180°) et le bleu pur (240°)
Saturation	0–100 %	100 % : aussi vive que possible, sans gris mélangé
Luminosité	0–100 %	52 % : juste au-dessus du point médian entre le noir et le blanc

Comment un code HEX devient HSL

Le convertisseur transforme d'abord le code HEX en RGB, puis ramène chaque canal sur une échelle de 0 à 1. La luminosité est la moyenne du canal le plus fort et du plus faible. La saturation dépend de l'écart entre ces deux canaux, rapporté à la luminosité. La teinte découle du canal dominant et de la comparaison entre les deux autres. Pour #0A84FF, on obtient 210,1°, 100 % et 51,96 %, arrondis en hsl(210, 100%, 52%).

Créer des variantes avec HSL

État survolé ou pressé : baissez la luminosité de 5 à 10 points.
État désactivé : baissez la saturation et augmentez la luminosité.
Teintes claires pour les fonds : gardez teinte et saturation, et réglez la luminosité entre 90 et 97 %.
Mode sombre : augmentez la luminosité pour que la couleur reste lisible sur des surfaces sombres.

L'onglet Palette automatise ce travail avec une échelle de onze paliers, de 50 à 950, et les harmonies affichées en dessous font tourner la teinte pour trouver les couleurs complémentaires et analogues.

Limite perceptuelle

La luminosité HSL n'est pas la luminosité perçue : un jaune et un bleu à 50 % paraissent d'une clarté très différente. Quand le contraste compte, testez la paire réelle dans le vérificateur de contraste des couleurs ou utilisez la valeur OKLCH que le convertisseur affiche aussi. Pour de simples valeurs de canal, voyez HEX en RGB.