Le RGB indique à l’écran combien de lumière émettre ; le HSL te dit à quoi la couleur ressemble réellement. Convertir les trois canaux en teinte, saturation et luminosité rend une couleur facile à ajuster à la main.
Comment fonctionne la conversion de RGB en HSL
- Divise R, G et B par 255 pour que chaque valeur soit comprise entre 0 et 1.
- Prends le maximum et le minimum des trois — leur moyenne est la luminosité L.
- Si le maximum et le minimum sont égaux, la couleur est grise : la teinte et la saturation valent toutes deux 0.
- Sinon, déduis S à partir de l’écart entre maximum et minimum, et lis H depuis le canal qui est maximum.
Exemple pratique
Exact en principe. Parce que H, S et L sont généralement affichés arrondis en nombres entiers, la conversion inverse peut décaler un canal d’un ou deux pas.
RGB et HSL expliqués
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()
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 RGB vers HSL
Les couleurs CSS les plus courantes, converties de RGB vers HSL.
| Couleur | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |