Convertisseur HEX vers HSL

Qu'est-ce qu'un convertisseur HEX vers HSL ?

// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
  let h = input.trim().replace(/^#/, '');
  if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
  const r = parseInt(h.slice(0, 2), 16) / 255;
  const g = parseInt(h.slice(2, 4), 16) / 255;
  const b = parseInt(h.slice(4, 6), 16) / 255;
  const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
  const L = (max + min) / 2;
  const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
  let H = 0;
  if (delta !== 0) {
    if (max === r) H = ((g - b) / delta) % 6;
    else if (max === g) H = (b - r) / delta + 2;
    else H = (r - g) / delta + 4;
    H = (H * 60 + 360) % 360;
  }
  return { h: H, s: S, l: L, alpha };
}

console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 }

Fonctionnalités clés

Alternatives au convertisseur HEX vers HSL

Exemples HEX vers HSL

#3b82f6

#FF5733

#3b82f6

#FF573380

Conversions HEX → HSL courantes

Table de référence des 10 codes hex les plus convertis et leurs équivalents HSL — primaires pures, secondaires pures et deux couleurs de marque réelles de la palette Tailwind.

Comment utiliser le convertisseur HEX vers HSL

1. 1

   Collez un code hex dans le champ HEX

   Déposez n'importe quelle valeur hex dans l'entrée HEX — avec ou sans `#` initial, en raccourci à 3 chiffres (`#F73`), en forme pleine à 6 chiffres (`#3b82f6`), en raccourci alpha à 4 chiffres (`#F738`) ou en forme pleine alpha à 8 chiffres (`#FF573380`). L'outil normalise les cinq formes d'entrée vers la même couleur canonique en interne. La casse n'a pas d'importance (`#3b82f6` et `#3B82F6` s'analysent à l'identique). Les caractères invalides ou un nombre de chiffres incorrect produisent une discrète erreur en ligne ; un hex valide met à jour chaque autre champ de format en temps réel, y compris HSL.

2. 2

   Lisez le triplet HSL dans le champ HSL

   Le champ HSL sous le champ HEX affiche la valeur `hsl()` correspondante dans la syntaxe moderne séparée par espaces de CSS Color 4 : `hsl(217 91% 60%)` pour une couleur opaque, `hsl(217 91% 60% / 0.5)` pour une couleur portant de l'alpha. La teinte est un degré entier de 0 à 360 ; la saturation et la clarté perceptuelle sont des pourcentages entiers de 0 à 100. Les valeurs sont arrondies pour la lisibilité d'affichage — la source de vérité OKLCH interne de l'outil signifie que la précision sous-jacente est en flottant, donc les allers-retours vers hex restent stables.

3. 3

   Cliquez sur Copier pour saisir la chaîne HSL

   Chaque carte de format possède un bouton Copier à droite. Un clic et la valeur arrive dans votre presse-papiers — le label du bouton bascule brièvement sur « Copié ! » pour vous le signaler. La chaîne copiée est la syntaxe canonique CSS Color 4 (`hsl(217 91% 60%)`) ; si votre cible a besoin de la forme à virgules héritée (`hsl(217, 91%, 60%)`), la conversion est mécanique. Pour une sortie spécifique à une plateforme (Tailwind v4, SwiftUI, Compose, Flutter), utilisez la section Copier comme code sous le sélecteur — ces extraits émettent le format qu'attend nativement chaque plateforme.

4. 4

   Aussi visibles : RGB, OKLCH, OKLAB, HSV, HWB, CMYK, couleur nommée

   Le même hex que vous collez illumine également les autres champs de format — RGB pour les appels canvas et le matériel, OKLCH et OKLAB pour les systèmes de design perceptuellement uniformes, HSV et HWB pour les flux de sélecteur de couleur designer, CMYK pour les estimations d'impression et la couleur CSS nommée la plus proche pour la prose de documentation. Vous n'êtes jamais enfermé dans hex → HSL seulement. Si vous avez aussi besoin du triplet OKLCH pour un bloc `@theme` Tailwind v4 (où la clarté perceptuelle compte plus que le L à gamma capricieux de HSL), il est juste là dans le champ OKLCH avec son propre bouton Copier.

5. 5

   Utilisez le sélecteur pour balayer la clarté visuellement

   Sous la grille de formats se trouvent un carré SL + curseur de teinte + curseur alpha pour l'exploration visuelle. Le carré SL se mappe directement sur le plan Saturation × Clarté perceptuelle de HSL : faites glisser verticalement pour parcourir L de 0 % à 100 % tout en regardant le champ HSL se mettre à jour en temps réel. Utile pour générer une teinte claire ou foncée visuellement avant de verrouiller le pourcentage exact. Sur les navigateurs basés sur Chromium (Chrome, Edge, Brave), le bouton EyeDropper active l'API native `EyeDropper` pour échantillonner n'importe quel pixel à l'écran, y compris hors du navigateur.

Erreurs courantes HEX / HSL

Balayer L de HSL pour une palette de 9 paliers :
hsl(120 100% 50%) et hsl(240 100% 50%) à la même L
Paraissent visiblement différents en luminosité — la palette paraît inégale.

Balayer L d'OKLCH à la place :
oklch(0.7 0.2 130) et oklch(0.7 0.2 250)
Paraissent également lumineux ; la palette se lit cohérente sur toutes les teintes.

Interpolation linéaire de H=350 à H=10 :
(350 + 10) / 2 = 180° (point médian cyan)
Incorrect — fait le long chemin autour de la roue.

Interpolation de teinte par court chemin :
point médian = ((350 + 10 + 360) / 2) % 360 = 0° (point médian rouge)
Passe par le rouge, le court chemin autour de la roue.

Coller des valeurs HSV depuis Photoshop dans une règle CSS hsl() :
Photoshop HSB 0, 100, 100 (rouge pur)
CSS hsl(0 100% 100%) rend en blanc — mauvaise couleur entièrement.

Convertir HSV → HSL avant de coller dans CSS :
HSV 0, 100, 100 → HSL 0, 100 %, 50 %
CSS hsl(0 100% 50%) rend en rouge pur — correct.

Émettre HSL sans signes pourcentage :
hsl(217 91 60)
Erreur de parsing CSS — chaque navigateur ignore la règle entière.

Émettre HSL avec signes pourcentage sur S et L :
hsl(217 91% 60%)
CSS valide — fonctionne dans chaque navigateur evergreen et IE 9+.

Qui utilise HEX vers HSL

Développeurs front-end définissant des variables CSS HSL

Définissez `--primary: hsl(217 91% 60%)` une fois à partir du hex Figma, puis composez `--primary-hover: hsl(217 91% 70%)`, `--primary-active: hsl(217 91% 50%)`, `--primary-bg: hsl(217 91% 95%)` en ajustant uniquement le nombre L. Collez le hex une fois, lisez le triplet HSL, déposez dans le bloc de propriétés personnalisées CSS. Le motif que les anciens systèmes de design utilisaient pour garder les teintes claires et foncées tonalement cohérentes avant que les rampes basées sur OKLCH ne prennent le relais.

Designers traduisant hex vers sélecteur HSL

Les designers élevés aux sélecteurs teinte + saturation + value (Adobe, Sketch, mode HSB de Figma) veulent souvent le triplet HSL même quand le fichier source livre du hex. Coller le hex une fois produit le HSL correspondant, prêt à être lu dans la position mentale du designer sur la roue chromatique sans devinette manuelle. Utile lors de la revue d'une spec de couleur de marque et de la volonté de savoir où elle se situe sur la roue de teintes par rapport aux autres couleurs de marque de la famille.

Auteurs de systèmes de thèmes calculant des jetons de mode sombre

Le thématisage en mode sombre inverse souvent L tout en gardant H et S — une couleur primaire en mode clair `hsl(217 91% 60%)` se mappe à `hsl(217 91% 40%)` (ou similaire) en mode sombre. Collez le hex du mode clair, lisez le HSL, calculez le L du mode sombre, réécrivez le nouveau HSL dans le jeton du thème sombre. Le motif est mécanique quand vous avez le triplet HSL ; c'est bien plus fastidieux à faire avec des canaux RGB bruts.

Auteurs de systèmes de design générant des rampes de teintes claires et foncées

Générez une rampe de teintes claires/foncées de 9 paliers en balayant L : `hsl(217 91% 95%)` (le plus clair), 85 %, 75 %, 65 %, 55 %, 45 %, 35 %, 25 %, `hsl(217 91% 15%)` (le plus foncé). Collez le hex de base, lisez le HSL, balayez L par pas de 10 % mentalement ou en code. (Pour les rampes perceptuellement uniformes où chaque palier paraît également lumineux, basculez sur le champ OKLCH à côté — les rampes HSL paraissent inégales sur les teintes parce que L n'est pas perceptuellement uniforme.)

Auteurs CSS utilisant les mathématiques hsl(from ...) au moment de l'exécution

Le CSS moderne prend en charge la syntaxe `color-function-from` : `hsl(from var(--primary) h s calc(l + 10%))` dérive une variante plus claire de `--primary` au moment du rendu, sans précalculer chaque palier. Collez le hex de marque, confirmez le triplet HSL, déposez la base dans une variable CSS, et utilisez les mathématiques au moment de l'exécution pour les jetons dérivés. Livré dans Chrome 119+, Safari 17.2+, Firefox 128+.

Développeurs front-end construisant des jeux de jetons HSL Tailwind v3

Tailwind v3 stockait les couleurs de thème comme triplets HSL séparés par espaces dans des variables CSS (`--primary: 217 91% 60%`), composées via `hsl(var(--primary))` dans `tailwind.config.js`. Collez le hex de marque, lisez le HSL, déposez les trois nombres (sans le wrapper `hsl(...)`) dans la définition de variable. Tailwind v4 a depuis pivoté vers OKLCH-first, mais les bases de code v3 utilisent toujours le motif HSL et continueront pendant des années.

Auteurs d'UI de sélecteur de couleur mappant hex vers contrôles HSL

Construire un sélecteur de couleur qui expose teinte / saturation / clarté perceptuelle en trois curseurs séparés (l'UI classique de style Adobe) signifie mapper un hex entrant sur les trois contrôles du sélecteur. Collez le hex ici, lisez le triplet HSL, positionnez les trois curseurs programmatiquement. La conversion est la même que celle qu'exécuterait votre sélecteur en interne ; cet outil expose les valeurs intermédiaires pour le débogage.

Ingénieurs d'accessibilité ajustant la clarté de la couleur de marque pour le contraste

Quand une couleur de marque échoue au contraste WCAG contre un fond, le correctif bon marché est de bumper L jusqu'à ce que le ratio passe — sans changer H ou S, la couleur se lit toujours comme la même identité de marque. Collez le hex de marque, regardez les badges de contraste, ajustez mentalement L (ou utilisez l'axe L du sélecteur) jusqu'à ce que WCAG et APCA passent tous deux. Le champ HSL expose le nouveau pourcentage L pour le document de spec ; le champ hex expose le code correspondant pour la feuille de style.

Mathématiques et parsing HEX vers HSL

HEX → RGB → HSL est un pipeline en deux étapes

La conversion passe par RGB comme intermédiaire. Étape un : analyser le hex en entiers RGB via `parseInt(hex.slice(1, 3), 16)` par canal. Étape deux : normaliser RGB à 0-1, calculer `max`/`min`/`delta`, appliquer la trigonométrie par morceaux de CSS Color 4 §6.4 : `L = (max + min) / 2`, `S = delta / (1 - |2L - 1|)`, `H = par morceaux * 60`. La structure en deux étapes est la raison pour laquelle l'outil expose aussi le tuple RGB intermédiaire — c'est gratuit à afficher et utile pour le débogage.

CSS Color 4 §6.4 définit l'algorithme de référence

La spécification W3C CSS Color 4 §6.4 (algorithme `rgb()` vers `hsl()`) définit les mathématiques canoniques par morceaux : la clarté perceptuelle comme point médian de max et min, la saturation comme `delta / (1 - |2L - 1|)` (avec S = 0 quand delta = 0, pour éviter la division par zéro sur les gris), la teinte comme trigonométrie à 60-degrés-par-pas selon quel canal est max. La spec gère aussi les cas limites : le noir pur (`#000`) donne `hsl(0 0% 0%)` avec une teinte arbitraire à 0° ; le blanc pur (`#FFF`) donne `hsl(0 0% 100%)` similairement ; le gris pur donne `hsl(0 0% 50%)`.

La teinte boucle à 360°, S et L sont des pourcentages

Les trois axes de HSL ont des unités différentes. La teinte est un degré angulaire de 0 à 360 avec bouclage — `hsl(370 ...)` est interprété comme `hsl(10 ...)` parce que les positions angulaires bouclent. La saturation et la clarté perceptuelle sont des pourcentages de 0 % à 100 %, sans bouclage ; les valeurs hors plage sont écrêtées. CSS Color 4 accepte aussi la teinte en tours (`hsl(0.6turn ...)`) ou en radians (`hsl(3.787rad ...)`) ; la sortie de l'outil utilise les degrés parce que c'est la forme la plus courante dans les UI d'outils de design et les documents de spec de marque.

La clarté perceptuelle de HSL n'est PAS perceptuellement uniforme

Un vert à `hsl(120 100% 50%)` paraît visiblement plus lumineux qu'un bleu à `hsl(240 100% 50%)`, même si tous deux ont la même clarté perceptuelle nominale — parce que HSL hérite des bizarreries gamma de sRGB et utilise la même échelle L sur chaque teinte. C'est pourquoi les rampes de teintes claires basées sur HSL paraissent inégales (l'extrémité claire de la rampe verte grimpe plus vite que l'extrémité claire de la rampe bleue) et pourquoi les systèmes de design ont en grande partie migré vers OKLCH pour la génération de rampes. L'outil expose à la fois HSL et OKLCH pour que le choix soit à un coup d'œil près.

Source de vérité interne OKLCH pour la stabilité des allers-retours

Bien que cette branche cible spécifiquement HEX → HSL, le convertisseur sous-jacent partagé conserve la couleur canonique sous forme de triplet OKLCH en interne. Les allers-retours HEX → HSL → RGB → OKLAB → HEX restent stables au bit près ; les convertisseurs hérités à pivot HSL accumulent une erreur d'arrondi et peuvent faire dériver la teinte de plusieurs degrés sur quelques conversions. Le pivot OKLCH préserve aussi la teinte comme axe stable, donc faire glisser le curseur de teinte ne traverse pas accidentellement le gris. Selon l'article OKLAB de Björn Ottosson de 2020.

Encodage de canal : non signé 8 bits, sRGB gamma-encodé

Les codes hex encodent des canaux RGB non signés 8 bits (0-255) dans l'espace colorimétrique sRGB défini par IEC 61966-2-1 (1996). Les valeurs sont *gamma-encodées* — la relation entre la valeur de canal et la luminosité perçue est non linéaire, suivant la fonction de transfert sRGB par morceaux (à peu près un exposant 2,4 avec un petit segment linéaire près de zéro). HSL est dérivé directement de ces valeurs RGB gamma-encodées sans étape de linéarisation, ce qui est la cause racine du problème d'uniformité perceptuelle de HSL. OKLCH linéarise d'abord puis re-mappe vers un espace perceptuellement uniforme ; HSL ne le fait pas.

Bonnes pratiques pour les flux HEX / HSL

Utilisez la syntaxe HSL moderne séparée par espaces dans le nouveau code

Les `hsl(217 91% 60%)` (séparé par espaces) et `hsl(217 91% 60% / 0.5)` (barre oblique pour alpha) de CSS Color 4 sont les syntaxes canoniques pour le code livré en 2025 et au-delà. Les formes à virgules héritées `hsl(217, 91%, 60%)` et `hsla(217, 91%, 60%, 0.5)` restent prises en charge partout mais sont stylistiquement dépréciées dans CSS Color 4. Utilisez la syntaxe moderne dans les nouvelles feuilles de style ; ne gardez `hsla()` que pour les contextes de repli IE 9-11 où vous avez réellement besoin du support hérité.

Générez les rampes en OKLCH, pas en HSL

L'axe de clarté perceptuelle de HSL n'est pas perceptuellement uniforme — un balayage L sur 9 paliers produit une rampe où les paliers verts paraissent plus lumineux que les paliers bleus à chaque valeur L. Pour les rampes où chaque palier doit paraître également lumineux (la demande par défaut d'un système de design), générez plutôt en OKLCH : `oklch(0.7 0.15 217)`, `oklch(0.6 0.15 217)`, etc. L'outil expose à la fois HSL et OKLCH pour le même hex, donc basculer entre les deux est à un clic Copier près.

Verrouillez la teinte et la saturation, balayez la clarté perceptuelle

Lorsque vous utilisez HSL pour le travail de teintes claires/foncées, ne changez que le nombre L — gardez H et S identiques sur toute la rampe. Une dérive de teinte (même de 5°) fait paraître une rampe désorganisée. Une dérive de saturation rend l'extrémité claire délavée et l'extrémité foncée boueuse. La discipline d'un-axe-à-la-fois est ce qui donne à HSL sa réputation amicale pour le design ; l'abandonner vous donne le pire des deux mondes.

Préférez hex pour les jetons source de vérité, HSL pour les variantes calculées

Lorsque vous rédigez une spec de jeton de design, préférez hex (ou OKLCH) comme forme canonique — ils sont plus concis et tiennent proprement dans du JSON ou YAML. HSL est plus utile pour les jetons *dérivés* au moment de l'exécution (`hsl(from var(--primary) h s calc(l + 10%))`) qu'en tant que format source de vérité. Les deux formats décrivent la même couleur ; le choix porte sur le rôle que joue le jeton dans le système.

Documentez les variantes HSL avec le hex de base

Lorsque vous livrez une variable CSS comme `--primary-light: hsl(217 91% 70%)`, incluez un commentaire pointant vers le hex de base : `/* base : #3b82f6 → hsl(217 91% 60%), variante claire +10 % L */`. Six mois plus tard, quand quelqu'un voudra dériver `--primary-lighter`, il aura besoin de la couleur de base pour calculer — et HSL seul n'expose pas cela. Le hex + HSL ensemble préservent la traçabilité complète.

Utilisez le hash d'URL pour partager des décisions de couleur en direct

Chaque changement de couleur met à jour le hash d'URL sous la forme `#hex=3b82f6` automatiquement. Copiez l'URL dans un fil Slack ou un ticket GitHub et quiconque l'ouvre atterrit sur la même couleur avec le même triplet HSL. C'est plus fiable que de coller une chaîne HSL dans le chat — les destinataires font parfois des fautes de frappe sur le degré ou laissent tomber un signe pourcentage en saisissant la valeur manuellement — et permet à un fil de revue de design de référencer une couleur exacte plutôt que « le bleu dont on a parlé mardi ». Le hash n'est jamais transmis au serveur.

Questions fréquemment posées