Choisir une couleur en HSL est confortable, mais les feuilles de style, les livrables design et les documents de marque fonctionnent encore en HEX. Ce convertisseur comble l’écart et te donne le code hexadécimal à six chiffres pour n’importe quelle combinaison de teinte, saturation et luminosité.
Comment fonctionne la conversion de HSL en HEX
- Transforme la saturation et la luminosité en fractions : 60% devient 0,6.
- Calcule le chroma C = (1 − |2L − 1|) × S — c’est la distance de la couleur par rapport au gris.
- Utilise la teinte pour placer ce chroma sur les canaux rouge, vert et bleu, puis décale les trois canaux de L − C/2.
- Multiplie chaque canal par 255, arrondis, puis écris-le en deux chiffres hexadécimaux.
Exemple pratique
L’arrondi se produit une seule fois, à la dernière étape, quand chaque canal est ramené à une valeur entière 0–255. Le résultat est le code HEX le plus proche de ton entrée HSL et correspond normalement à ce qu’un outil de design affiche.
HSL et HEX expliqués
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
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
Table de référence HSL vers HEX
Les couleurs CSS les plus courantes, converties de HSL vers HEX.
| Couleur | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |