Convertion des couleurs
Le cercle chromatique et la teinte
Le système HSL est basé sur ce qu'on appelle le « cercle chromatique » ou encore la « roue des couleurs ».
Cercle chromatique, aussi appelé roue des couleurs
(Image : Bwilliam/Merill, via Wikimedia Commons).
Le cercle chromatique contient les couleurs primaires et les couleurs secondaires. Les couleurs primaires ont la propriété qu'une de leurs composantes RGB est égale à 100% et les deux autres égales à 0%. Pour les couleurs secondaires, c'est le contraire : une des composantes est égale à 0% et les deux autres sont égales à 100%. Ces couleurs sont représentées dans le tableau suivant :
| Nom | Couleur | H | (R, G, B) |
|---|---|---|---|
| red | 0 | (1, 0, 0) | |
| yellow | 60 | (1, 1, 0) | |
| lime | 120 | (0, 1, 0) | |
| cyan/aqua | 180 | (0, 1, 1) | |
| blue | 240 | (0, 0, 1) | |
| magenta/fuchsia | 300 | (1, 0, 1) |
(Pour la facilité, on utilisera des nombres entre 0 et 1 pour les composantes RGB au lieu de pourcentages.)
Le cercle chromatique est divisé en 360° et les couleurs qu'on y retrouve sont repérées par l'angle où elles figurent sur le cercle. La valeur de cet angle est la teinte, désignée par H (pour « hue »), donnée sans utiliser le symbole de degré. On convient de disposer le rouge à 0°, le vert à 120° et le bleu à 240°; les couleurs secondaires, elles, sont disposées à mi-chemin entre les couleurs primaires : le jaune à 60°, le cyan/aqua à 180° et le magenta/fuchsia à 300°. Ceci donne les valeurs de H qui figurent dans la troisième colonne du tableau précédent.
Les autres couleurs du cercle chromatique sont caractérisées par le fait qu'une des composantes RGB est égale à zéro et une autre égale à un; la troisième, elle, peut prendre n'importe quelle valeur entre
les deux. Ainsi, les couleurs situées entre le rouge (red) et le jaune (yellow) auront des composantes RGB de la forme (R, G, B) = (1, G, 0) où G varie de 0 à 1 et
les couleurs situées entre le jaune et le vert pâle (lime) auront des composantes RGB de la forme (R, G, B) = (R, 1, 0) où R varie de 1 à 0; pour les couleurs entre le vert pâle et le
cyan/aqua on aura (R, G, B) = (0, 1, B) avec 0 < B < 1 et ainsi de suite.
Le tableau suivant donne les caractéristiques de trois couleurs parmi celles situées sur le cercle chromatique :
| Nom | Couleur | H | (R, G, B) |
|---|---|---|---|
| darkorange | 33 | (1, 0.55, 0) | |
| springgreen | 150 | (0, 1, 0.50) | |
| deepskyblue | 195 | (0, 0.75, 1) |
Nous allons voir dans la section suivante comment calculer les valeurs de la teinte H pour ces trois couleurs.
Passage du système RGB au système HLS
Calcul de la teinte H
La couleur darkorange a des composantes RGB égales à (1, 0.55, 0). Cela la place entre le rouge et le jaune qui ont des composantes RGB respectives de (1, 0, 0) et (1, 1, 0).
En fait, en raison de sa deuxième composante qui vaut 0.55, darkorange devrait être placée à 55% de la distance (égale à 60°) qui sépare red et
yellow, donc à l'angle 0°+0.55×60° = 33°. En conséquence, H = 33.
La couleur springgreen a des composantes RGB égales à (0, 1, 0.50). Cela la place exactement à mi-chemin entre le vert pâle et le cyan qui ont des composantes RGB respectives de (0, 1, 0)
et (0, 1, 1), c.-à-d. à un angle de 150°. Donc H = 150.
Finalement, la couleur deepskyblue a des composantes RGB égales à (0, 0.75, 1). Cela la place aux trois-quarts du chemin (soit 45°) entre le bleu et le cyan, de composantes RGB
respectives de (0, 0, 1) et (0, 1, 1). Puisque le cyan est avant le bleu sur le cercle chromatique, il faut donc partir de la position du bleu (240°) et reculer de 45°. Cela nous
donne un angle de 195° et une valeur H = 195.
Couleurs de même teinte H
En partant d'une couleur C de composantes (R, G, B) sur le cercle chromatique, comment peut-on obtenir les autres couleurs de même teinte H ? Tout simplement en mélangeant C avec du noir et du blanc.
Rappelons que les composantes RGB du noir et du blanc sont (0, 0, 0) et (1, 1, 1) respectivement. Si on commence par mélanger C avec du noir, on obtiendra une couleur de composantes RGB (αR, αG, αB) pour un certain α compris entre 0 et 1. Si maintenant on mélange le résultat avec du blanc, le résultat final sera une
couleur de composantes RGB (αR+β, αG+β, αB+β) (0≤α≤1, 0≤β≤1-α). Toutes les couleurs de même teinte que C s'obtiennent de cette façon.
La luminance L et la saturation S
La luminance L d'une couleur est définie comme étant la moyenne de la plus grande et de la plus petite de ses composantes RGB. Elle est exprimée en pourcentage. Puisque les couleurs sur le cercle chromatique ont toutes leur plus grande composante égale à 1 et leur plus petite égale à 0, cela veut dire qu'elles ont toutes une luminance de 50%. On constate que la définition ne tient pas compte de l'effet physiologique des couleurs puisque le jaune et le bleu ont la même luminance alors que le jaune parait beaucoup plus clair que le bleu.
La définition de la saturation est encore plus arbitraire; comme elle est un peu compliquée, nous l'omettrons. Notons simplement que les couleurs qui ont une composante RGB égale à 0 ou une composante RGB égale à 1 ont automatiquement une saturation de 100%; les teintes de gris, par contre, ont une saturation de 0%. La saturation du blanc et celle du noir ne sont pas définies car elles devraient toutes les deux être à la fois 0% et 100%.
Exemples
La couleur olive a des composantes RGB égales à
(0.5, 0.5, 0) = (0.5⋅1, 0.5⋅1, 0.5⋅0). Elle a donc la même valeur de H que le jaune, 60. On a L = (0.5+0)/2 = 25% et S = 100% car une des composantes est 0.
La couleur honeydew a des composantes RGB égales à (0.94, 1, 0.94) =
(0.06⋅0+0.94, 0.06⋅1+0.94, 0.06⋅0+0.94). Elle a donc la même valeur de H que le vert pâle, soit 120. On a L = 97% et S = 100%.
Convertisseur de couleurs
Le convertisseur de couleurs dans la fenêtre ci-dessous vous permet de convertir n'importe quelle spécification de couleur que nous avons vue dans toutes les autres. Vous n'avez qu'à entrer le code ou le nom d'une couleur à l'endroit prévu et cliquer le bouton « Convertir ».
Entrez une couleur :
Le résultat
de la conversion
apparaîtra ici.