HSL est la façon conviviale de choisir une couleur, RGB est ce que les écrans, les API canvas et le code image consomment réellement. Ce convertisseur transforme n'importe quelle triple teinte/saturation/luminosité en canaux exacts 0–255.
Comment fonctionne la conversion de HSL en RGB
- Convertis S et L en fractions et calcule la chroma C = (1 − |2L − 1|) × S.
- Divise la teinte par 60 pour trouver son segment sur la roue des couleurs et calcule la valeur intermédiaire X = C × (1 − |(H/60 mod 2) − 1|).
- Assigne C, X et 0 aux emplacements R, G et B selon ce segment.
- Ajoute l'offset de luminosité L − C/2 aux trois canaux puis multiplie par 255.
Exemple pratique
Le résultat est exact jusqu'à l'arrondi final aux canaux entiers. Les valeurs fractionnaires de teinte ou de saturation sont prises en charge et aboutissent simplement au triple RGB le plus proche.
HSL et RGB 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 RGB ?
RGB décrit une couleur comme trois canaux de lumière — rouge, vert et bleu — chacun de 0 à 255. Il reflète le fonctionnement des écrans : tous trois à 255 donnent blanc, tous à 0 donnent noir. RGB est le bon choix quand tu dois calculer avec une couleur, et rgba() ajoute la transparence.
- Syntaxe :
- rgb(R, G, B)
- Plage :
- 0–255 par canal
- Idéal pour :
- code, canvas, transparence avec rgba()
Table de référence HSL vers RGB
Les couleurs CSS les plus courantes, converties de HSL vers RGB.
| Couleur | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |