- Comment représenter une couleur : les formats trichromiques, RGB et CMY ;
- Comment représenter une couleur : les formats cylindriques, HSV et HSL (le présent article) ;
- Comment représenter une couleur : les formats employant la luma, Y’UV et dérivés ;
- Comment représenter une couleur : les formats standards de la CIE, XYZ, Lab, Lch.
Dans le premier article, on a expliqué le format RGB. En RGB, nous sommes partis des trois types de cellules sensibles aux couleurs dans l’œil, les trois types de cônes, qui sont sensibles au rouge, vert et bleu, et nous avons construit un système de couleur imitant cela, c’est-à-dire un système où l’on dose des niveaux de rouge, de vert et bleu pour reconstituer une couleur en miroitant le fonctionnement physiologique de l’œil.
On peut faire autrement. On peut se baser sur la psychologie de la perception des couleurs à la place, non basée sur un mélange de couleurs. Les espaces de couleurs cylindriques sont là pour ça.
Espaces cylindriques : HSV, HSL…
Les espaces RGB ou CMY sont cubiques : les trois couleurs peuvent être représentées dans un repère cartésien « x, y, z », dit cubique, où chaque coordonnée correspond à une couleur.
Les formats qui vont suivre n’utilisent plus un repère cartésien, mais un repère cylindrique : avec angle, rayon, hauteur. Il s’agit d’un arrangement différent des couleurs du RGB (ou du CMY). Ces deux représentations sont bijectifs : ils contiennent les mêmes couleurs et peuvent être converties l’un en l’autre de façon exacte.
L’approche des systèmes cylindriques dont on va parler est issue de la psychologie humaine : généralement, on ne jauge pas les quantités de R, G, B à mélanger lorsqu’on veut choisir une couleur. À la place, on va plutôt choisir une famille de couleurs (les bleus, les oranges…) puis choisir une teinte plus ou moins foncée ou claire, vive ou terne dans cette famille de couleurs, et enfin une luminosité, claire ou sombre.
Cette approche-là, plus proche de la vie courante, est ce qui est utilisé ici. En réalité, parmi tous les espaces de couleurs, cette séparation entre couleur (« chrominance ») d’un côté et la saturation/luminosité de l’autre est ce qui se fait de plus. La séparation trichromique du RGB fait plutôt figure d’exception.
Construction du système HSV
Le format « HSV » est un format cylindrique très utilisé. Voyons comment on peut essayer de le reconstruire.
Partons des couleurs de l’arc-en-ciel, du spectre de la lumière blanche :

Sur ce spectre, l’on devine les positions des couleurs rouges, vert, bleu, ainsi que le cyan et le jaune. Mais qu’en est-il du magenta ?
Le magenta n’existe pas sur l’arc-en-ciel ! Et ce n’est pas la seule couleur : le rose, le blanc, le gris, ou le marron n’y sont pas non plus. Ces couleurs sont des constructions du cerveau. Si le jaune ou le bleu peuvent être obtenues avec une seule longueur d’onde, le magenta ou le marron sont obtenues par la perception simultanée de plusieurs longueurs d’ondes (et donc l’excitation de plusieurs cônes en même temps).
Le magenta en particulier est obtenu par un mélange de bleu et de rouge. Incidemment, il s’agit des deux extrémités du spectre de la lumière blanche. On peut recourber le spectre sur lui-même de façon à en faire rejoindre les deux extrémités, et y placer le magenta. L’on obtient est alors un cercle chromatique :

Chaque teinte de couleur est représentée par un angle sur le cercle. Les couleurs fondamentales sont placées à 0° (rouge), 120° (vert) et 240° (bleu). Automatiquement, on aura les couleurs primaires à 60° (jaune), 180° (cyan) et 300° (magenta).
Évidemment, ici, l’on n’a que des couleurs de base, que des « teintes ». Si l’on en souhaite les variantes sombres/claires, ou ternes/vives, il faut des coordonnées en plus.
Si l’angle de la teinte est le premier paramètre, le deuxième peut-être la saturation : on peut voir ça comme son intensité. Une couleur intense est alors vive, au contraire d’une couleur terne, grise, délavée.
Le cercle chromatique à une seule dimension devient alors un disque chromatique, où chaque couleur est représentée par des coordonnées polaires. L’angle représente la teinte, et le rayon, sa saturation : plus on s’approche du centre, plus la couleur est terne. Plus on va vers l’extérieur, plus la couleur est vive :

Ceci ne nous permet pas encore tout : il manque la possibilité de choisir le caractère foncé ou claire d’une couleur. Et pour ça, il nous faut le dernier des paramètres. Celui-ci s’appelle la valeur : on peut le relier à sa clarté, sa brillance. Une couleur avec une valeur faible sera proche du noir, alors qu’avec une valeur haute sera pure et éclatante.
Si l’on reste au centre, au niveau des gris, on aura une échelle de gris qui va du noir au blanc.
De cercle, nous étions passés à disque, et désormais de disque, passons à cylindre : le paramètre de la valeur correspond ici à la hauteur sur le cylindre chromatique :

Dans l’ensemble, on a un cylindre complet, et les coordonnées angle, rayon, hauteur donnent respectivement la teinte (rouge, bleu…), la saturation (du gris terne à la couleur vive) et la valeur (la même teinte+saturation, mais sombre ou claire) :
Teinte, Saturation et Valeur — TSV — c’est le nom français pour la représentation HSV (de l’anglais : hue, saturation, value). Le premier paramètre est un angle de 0 à 360°, les deux autres généralement un pourcentage de 0 à 100 % ou bien une valeur entre 0 et 1.
Notre orange-vif de plus tôt donne alors : hsv(30, 87%, 80%)
. On note que le premier nombre, l’angle, vaut 30°. Si le rouge est à 0° et le jaune à 60°, on comprend que l’orange soit situé exactement entre les deux, à 30°.
Variante HSL
À la place de HSV, on peut trouver HSL : hue, saturation, lightness, soit teinte, saturation, luminosité.
Les deux systèmes sont très proches, et ne diffèrent que par la troisième coordonnée.
Sur le HSV, la hauteur du cylindre montre l’intensité de la couleur à partir du noir. Autrement dit, en partant de rien (pas de lumière), on illumine peu à peu la couleur jusqu’à sa puissance maximale dans sa couleur.
Avec le HSL, cette coordonnée montre la luminosité totale. Si bien que sur une luminosité maximale à 100 % on obtient du blanc. Pour avoir une couleur pleine, la luminosité doit être à 50 %, et on joue ensuite sur la saturation pour aller du gris à cette couleur :

Notre orange-vif se compare en HSV et en HSL alors :
-
hsv(30, 87%, 80%)
-
hsl(30 77% 45%)
L’angle de la teinte est la même dans les deux espaces cylindriques, pour chaque couleur.
Variante HWB
Une variante encore plus intuitive est le HWB, pour hue, whiteness, blackness, soit teinte, blanc, noir.
Ce système reprend complètement le principe que l’on aurait avec un set de 5 tubes de peinture : les couleurs primaires avec lesquelles on peut faire toutes les couleurs, ainsi que le noir et le blanc.
En HWB, on choisit notre teinte, et l’on dose ensuite le noir et le blanc pour obtenir la couleur précise souhaitée.
Les doses de blanc et de noir sont notés sur une échelle de 0 à 100 %. Il constitue, en quelque sorte, la quantité de blanc (ou de noir) dans le total, incluant le pigment. Ainsi, avec 100 % de blanc, on a automatiquement 0 % de pigment : la couleur est donc totalement blanche. De même, avec 100 % de noir, on n’a que du noir.
Si l’on met 45 % de blanc et 45 % de noir, on obtient du gris, et il reste 10 % pour la couleur. On a donc une couleur délavée dans beaucoup de gris.
Si l’on met 0 % de blanc et 0 % de noir, on a seulement de la couleur, qui est alors très vive :

Et toujours la représentation de notre orange (notez que l’angle de teinte est identique à chaque fois) :
-
hsv(30 87% 80%)
-
hsl(30 77% 45%)
-
hwb(30 10% 20%)
Pour conclure
Plusieurs systèmes cylindriques existent et utilisent toutes des logiques basées sur la façon psychologique et intuitive de former les couleurs. Ils n’utilisent pas de synthèse des couleurs, comme RGB ou CMY, mais une séparation claire entre une teinte donnée, puis l’intensité de cette teinte sur une échelle du blanc au noir.
HSV, HSL et HWB sont tous bijectifs sur l’espace RGB (et CMY) : ils contiennent les mêmes 16,7 millions de couleurs. D’autres formats, notamment Lab, et Luv (qui sont cartésiens, mais pas trichromiques) ont également leur penchant cylindrique : LCh(ab) et LCh(uv). Ces espaces-là sont décrits dans l’article suivant.
Les trois systèmes HSV, HSL et HWB sont très proches, et utilisent notamment le même angle (la première des trois valeurs) pour une même teinte donnée. Cela ne sera pas le cas, par exemple, du système OkLab, où il existe également un angle, mais légèrement différent de celui des systèmes HSV et ses variantes.