Convertissez n'importe quel code couleur HEX en HSL — teinte, saturation, luminosité — instantanément
Collez un code couleur HEX et obtenez les valeurs HSL exactes et la chaîne hsl() prête pour CSS. Utile pour ajuster la luminosité ou la saturation en CSS ou Tailwind. Supporte les codes hex à 3 et 6 chiffres.
Besoin de HEX ↔ RGB ↔ HSL ↔ OKLCH en même temps ?
Ouvrir le convertisseur complet →HSL (Teinte-Saturation-Luminosité) rend la manipulation des couleurs intuitive. Pour éclaircir une couleur, augmentez L. Pour la désaturer, diminuez S. Pour changer la teinte, modifiez H. C'est pourquoi Tailwind CSS, les variables CSS et les systèmes de design exposent souvent les couleurs en HSL : il devient trivial de générer des nuances comme hsl(217, 91%, 30%) pour les variantes sombres ou hsl(217, 91%, 80%) pour les variantes claires de la même teinte.
HSL expose la teinte, la saturation et la luminosité comme contrôles séparés, facilitant la création programmatique de teintes, nuances et couleurs complémentaires à partir d'une seule valeur hex de base.
H (Teinte) est l'angle de couleur 0°–360°. S (Saturation) est l'intensité de 0% (gris) à 100% (vif). L (Luminosité) va de 0% (noir) à 50% (la couleur) jusqu'à 100% (blanc).
Oui, hsl() est supporté dans tous les navigateurs. Le CSS moderne accepte aussi la syntaxe sans virgules : hsl(217 91% 60%).
OKLCH est perceptuellement uniforme (L égal = luminosité perçue égale), tandis que HSL ne l'est pas. Pour les palettes de couleurs accessibles et les tokens de design, OKLCH est plus fiable. Utilisez le convertisseur complet pour comparer les deux.