En bref
- La teinte est la position de la couleur sur le cercle chromatique, un angle de 0° à 360° : rouge à 0°, vert vers 120°, bleu vers 240°, puis retour au rouge.
- La saturation indique la quantité de teinte présente, de 0 % pour le gris à 100 % pour la couleur pure. La luminosité indique à quel point la couleur est claire, de 0 % pour le noir à 100 %.
- La teinte forme un cercle : deux teintes ne peuvent donc pas être séparées de plus de 180°, soit les deux côtés opposés du cercle. Un écart apparemment supérieur est en réalité plus court dans l’autre sens.
- HSB sert à choisir et à décrire les couleurs à l’œil ; RGB décrit comment les écrans les produisent ; Lab mesure la différence visuelle entre deux couleurs. Ces modèles répondent à des questions différentes.
- Recréer une couleur avec trois curseurs distincts révèle laquelle des trois estimations a dévié. Choisir parmi des échantillons ne le permet pas.
Trois nombres, trois questions
Prenez une couleur, par exemple un bleu-vert atténué. Pour la décrire, vous ne parleriez pas des quantités de lumière rouge, verte et bleue qu’elle contient, même si c’est ce que produit l’écran. Vous diriez : bleu-vert, peu intense, assez sombre. C’est le modèle HSB : teinte, saturation, luminosité, dans l’ordre où l’on pense réellement. Alvy Ray Smith l’a proposé à la fin des années 1970 précisément pour permettre de choisir les couleurs comme on les perçoit. Il est aussi appelé HSV, où V signifie value. Il s’agit du même modèle.
| Dimension | La question à laquelle elle répond | Plage | Les extrémités |
|---|---|---|---|
| Teinte | De quelle couleur s’agit-il ? | 0°–360° | Rouge à 0°, puis jaune, vert, cyan, bleu et magenta, avant de revenir au rouge |
| Saturation | Quelle quantité de cette couleur contient-elle ? | 0–100% | 0 % est un gris sans aucune teinte ; 100 % est la version la plus pure de la teinte |
| Luminosité | À quel point est-elle claire ? | 0–100% | 0 % est noir, quelles que soient les deux autres valeurs ; 100 % est aussi clair que la teinte le permet |
La teinte est un angle, et cela compte
La teinte se dispose en cercle parce que le spectre, qui va du rouge au violet en ligne droite, se referme grâce aux pourpres absents de l’arc-en-ciel. Le magenta se place entre violet et rouge et ferme la boucle. On mesure donc la teinte par un angle : rouge à 0°, jaune vers 60°, vert vers 120°, cyan vers 180°, bleu vers 240°, magenta vers 300°, puis rouge à nouveau à 360°.
Le cercle a une conséquence que n’a pas la ligne : la distance maximale correspond à un demi-tour. Deux teintes ne peuvent jamais être éloignées de plus de 180°. Estimer 350° pour une cible à 10° ne donne pas une erreur de 340°, mais de 20°, en passant par le haut du cercle. Tout score honnête doit prendre le chemin le plus court. L’erreur maximale est la couleur complémentaire, exactement à l’opposé. C’est pourquoi Percore normalise l’erreur de teinte sur 180° : cette plage va de la reproduction parfaite à l’écart maximal possible.
Saturation et luminosité
La saturation représente la quantité de teinte dans la couleur. À saturation nulle, toutes les teintes deviennent le même gris. C’est pourquoi il est réellement difficile de nommer la teinte d’une couleur très pâle ou très grisée : il reste très peu de teinte à voir. À saturation maximale, la couleur est aussi vive que sa teinte le permet. La luminosité indique simplement à quel point elle est claire. À luminosité nulle, tout est noir, quelles que soient la teinte et la saturation.
Leur interaction prête à confusion. Un rouge sombre et saturé et un rouge clair et désaturé peuvent sembler totalement différents, tout en partageant la même teinte. En pratique, les gens retiennent souvent assez bien la teinte et surestiment la saturation : la couleur mémorisée est plus vive que l’originale. Les erreurs de luminosité vont dans les deux sens selon l’éclairage ambiant. Ce sont ces tendances qu’il faut chercher dans un score par dimension.
HSB face aux autres modèles
HSB est l’une des façons de décrire une même couleur. Chaque modèle a sa raison d’être. Choisir le mauvais pour une tâche est une source fréquente de confusion. Voici à quoi chacun sert.
| Modèle | Ce qu’il décrit | Le plus adapté pour |
|---|---|---|
| HSB / HSV | La teinte comme angle, la saturation et la luminosité comme pourcentages. À 100 % de luminosité, la teinte est dans sa version la plus pure et la plus claire. | Choisir et décrire les couleurs à l’œil ; sélecteurs de couleurs ; comprendre une erreur de mémoire des couleurs |
| HSL | Même teinte, mais une clarté à la place de la luminosité : 100 % donne toujours du blanc et 50 % la teinte pure. | CSS et conception web, où éclaircir une couleur vers le blanc est courant |
| RGB | Les quantités de lumière rouge, verte et bleue, chacune de 0–255. Ce que fait physiquement l’écran. | Code, formats de fichiers et affichage sur un appareil ; peu intuitif à l’œil |
| CIELAB (Lab) | Une clarté et deux axes opposés, vert–rouge et bleu–jaune, conçus pour que des distances égales paraissent également différentes. | Mesurer l’écart entre deux couleurs avec Delta E ; impression et gestion des couleurs |
Un repère utile : RGB est pour la machine, HSB et HSL pour la personne, Lab pour la mesure. Les outils de perception des couleurs qui utilisent Delta E mesurent dans Lab. Ceux qui proposent trois curseurs vous font répondre dans HSB. Les deux approches sont valables et vous apprennent des choses différentes.
Pourquoi trois curseurs en disent plus qu’un échantillon
Si une couleur apparaît, disparaît, puis que vous choisissez le plus proche de six échantillons, le résultat est une seule information : juste ou faux, avec une distance. Si vous recréez la couleur à partir de trois commandes distinctes, le résultat contient trois nombres : l’écart de teinte, de saturation et de luminosité. Ces nombres expliquent l’erreur. Une personne dont l’erreur de teinte reste faible, mais celle de saturation élevée chaque jour, apprend quelque chose sur sa façon de voir et peut en tenir compte.
C’est le principe de la session Couleur de Percore : une couleur remplit l’écran, disparaît, puis doit être retrouvée avec les curseurs de teinte, saturation et luminosité. Chaque erreur est normalisée, la teinte sur 180° et les deux autres sur leur plage complète, puis les trois sont moyennées en une précision de 0 à 100. Le détail est affiché à côté. La formule complète figure dans Comment Percore calcule les scores. Comment améliorer votre perception des couleurs transforme ce détail en méthode d’entraînement.
Recréez une couleur avec les trois curseurs.
Télécharger dans l’App StoreQuestions fréquentes
HSB et HSV sont-ils identiques ?
Oui. V signifie value, B brightness. Les deux désignent le même modèle. Le nom varie selon le logiciel : Apple et Adobe utilisent HSB, beaucoup d’autres HSV.
Quelle est la différence entre HSB et HSL ?
La teinte est commune. Dans HSB, 100 % de luminosité donne la version la plus pure et claire de la teinte. Dans HSL, 100 % de clarté donne du blanc et la teinte pure se situe à 50 %. HSL est courant en CSS, HSB dans les outils de création.
Pourquoi le rouge est-il à 0° sur le cercle chromatique ?
Par convention. Le cercle doit commencer quelque part. Le rouge a été choisi lors de la définition du modèle. L’ordre rouge, jaune, vert, cyan, bleu, magenta suit le spectre, le magenta refermant la boucle.
Quelle est la plus grande erreur de teinte possible ?
180°, la teinte directement opposée sur le cercle, soit la complémentaire. Tout écart apparemment supérieur est plus petit dans l’autre sens. Il faut donc toujours mesurer l’erreur par le chemin le plus court.
Sur laquelle des trois dimensions se trompe-t-on le plus ?
En pratique, la saturation : on se souvient souvent d’une couleur plus vive qu’elle ne l’était. La teinte est souvent proche et la luminosité dépend beaucoup de l’éclairage ambiant. Un score par dimension montre votre propre tendance.