Comment convertir HEX en HSL
Convertissez des codes couleur HEX en HSL instantanément. Saisissez une valeur HEX ou RGB, ou utilisez les curseurs : tous les formats se mettent à jour en même temps, avec un aperçu, la formule et un tableau des couleurs courantes.
- Saisissez ou collez une valeur HEX, par exemple #3B82F6, dans son champ ci-dessus.
- La valeur HSL se met à jour aussitôt : #3B82F6 donne hsl(217, 91%, 60%). Les autres formats et l'aperçu de la couleur suivent aussi.
- Copiez la valeur HSL dans votre CSS, votre outil de design ou votre code.
La formule HEX → HSL
Ramenez le rouge, le vert et le bleu entre 0 et 1. La luminosité est la moyenne du canal le plus fort et du plus faible, la saturation augmente avec leur écart, et la teinte est la position du canal dominant sur le cercle chromatique de 360° :
#3B82F6 → hsl(217, 91%, 60%)
Couleurs courantes en HEX et en HSL
| HEX | HSL |
|---|---|
#000000 | hsl(0, 0%, 0%) |
#FFFFFF | hsl(0, 0%, 100%) |
#FF0000 | hsl(0, 100%, 50%) |
#00FF00 | hsl(120, 100%, 50%) |
#0000FF | hsl(240, 100%, 50%) |
#FFFF00 | hsl(60, 100%, 50%) |
#00FFFF | hsl(180, 100%, 50%) |
#FF00FF | hsl(300, 100%, 50%) |
#808080 | hsl(0, 0%, 50%) |
#FFA500 | hsl(39, 100%, 50%) |
#800080 | hsl(300, 100%, 25%) |
#3B82F6 | hsl(217, 91%, 60%) |
HEX et HSL expliqués
Une couleur HEX est un # suivi de six chiffres hexadécimaux : deux pour le rouge, deux pour le vert et deux pour le bleu, de 00 (rien) à FF (maximum). C'est la façon la plus courante d'écrire une couleur en CSS et dans les outils de design.
HSL (TSL) décrit une couleur par sa teinte (un angle de 0 à 360 sur le cercle chromatique), sa saturation et sa luminosité (toutes deux en %). Il permet de créer facilement des nuances plus claires, plus foncées ou plus douces d'une même couleur.
Questions fréquentes
La conversion change-t-elle la couleur ?
HEX, RGB et HSL décrivent les mêmes couleurs d'écran : la conversion entre eux est exacte (HSL est arrondi à l'entier). Le CMJN sert à l'impression : le rendu imprimé dépend du profil de couleur de l'imprimante, prenez donc les valeurs CMJN issues de l'écran comme point de départ.
Puis-je utiliser le résultat en CSS ?
Oui. Le CSS accepte directement l'hex (#3B82F6), rgb(59, 130, 246) et hsl(217, 91%, 60%). Le CMJN n'est pas un format CSS ; il sert à l'impression et dans les logiciels de design.
Et la transparence ?
Ajoutez une valeur alpha : hex à 8 chiffres (#3B82F680) ou rgba()/hsla() en CSS. Le convertisseur travaille sur la couleur opaque ; la valeur alpha reste la même dans chaque format.
Cet outil est-il gratuit ?
Oui, il est gratuit. Sans inscription ni e-mail. Résultats directement sur cette page.
Comment obtenir mon résultat ?
Utilisez cet outil sur cette page. Le résultat apparaît ici, sans envoi par e-mail.