HSL décrit une couleur comme on en parle : quelle teinte, combien de saturation, quelle luminosité. Convertir un code HEX en HSL est la façon la plus rapide d’obtenir une couleur que tu peux réellement ajuster — éclaircir, atténuer ou construire toute une échelle.
Comment fonctionne la conversion de HEX en HSL
- Convertis le code HEX en RGB et divise chaque canal par 255, de sorte que les trois valeurs soient comprises entre 0 et 1.
- Trouve la valeur la plus grande et la plus petite des trois. Leur moyenne est la luminosité L.
- L’écart entre elles détermine la saturation S : divise-le par (2 − max − min) pour les couleurs claires, ou par (max + min) pour les couleurs sombres.
- Le canal qui contient le maximum décide de la teinte H — rouge à 0°, vert à 120°, bleu à 240° — et les deux autres canaux positionnent la teinte à l’intérieur de ce segment.
Exemple pratique
Les calculs sont exacts, mais les valeurs HSL sont habituellement arrondies en degrés entiers et en pourcentages. La conversion inverse peut donc aboutir à une couleur RGB à un ou deux pas près de l’original — invisible en pratique, mais utile à savoir si tu fais des allers-retours répétés.
HEX et HSL expliqués
Qu'est-ce que HEX ?
Un code HEX est un nombre hexadécimal à six chiffres qui stocke les canaux rouge, vert et bleu d’une couleur précédé d’un #. Chaque paire de chiffres représente un canal, de 00 (aucun) à FF (plein), ce qui donne les mêmes 16,7 millions de couleurs que RGB mais dans une notation plus compacte. HEX est le format par défaut dans CSS, les outils de design et les chartes graphiques.
- Syntaxe :
- #RRGGBB
- Plage :
- 00–FF par canal
- Idéal pour :
- CSS, transfert de design, chartes graphiques
Qu'est-ce que HSL ?
HSL sépare une couleur en teinte (0–360° sur le cercle chromatique), saturation (à quel point la couleur est vive, 0–100%) et luminosité (à quel point elle est claire, 0–100%). Comme chaque partie correspond à la manière dont on décrit les couleurs, HSL est le format le plus simple pour créer des tons, des nuances et des palettes cohérentes — à la main ou en code.
- Syntaxe :
- hsl(H, S%, L%)
- Plage :
- 0–360°, 0–100%, 0–100%
- Idéal pour :
- palettes, tons et nuances, theming
Table de référence HEX vers HSL
Les couleurs CSS les plus courantes, converties de HEX vers HSL.
| Couleur | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |