Guide pratique des modèles couleur
HSB vs HSL vs HSV : différences et usages pratiques
Les trois noms partagent un cercle de teinte, mais ils ne décrivent pas tous les mêmes coordonnées. Ce guide montre ce que change le troisième canal, pourquoi des pourcentages identiques donnent des couleurs différentes et comment conserver une teinte jusqu’au code web.
HSB vs HSL vs HSV
HSB, HSV et HSL sont-ils identiques ?
HSB et HSV désignent généralement le même modèle dérivé de RGB : brightness et value sont deux noms pour son troisième canal. HSL est une autre transformation. Il place une teinte pure et saturée à 50 % de lightness et atteint le blanc à 100 %. HSB ou HSV place la teinte pure à 100 % de brightness et n’atteint le blanc que lorsque la saturation tombe à zéro. Conservez toujours le nom du modèle avec le triplet.
La réponse courte
- Considérez HSB et HSV comme équivalents seulement après vérification de l’application, des plages, du profil et de l’arrondi.
- Ne collez pas les pourcentages de saturation et de brightness HSB dans les champs saturation et lightness HSL.
- Utilisez HSB ou HSV pour un réglage visuel intuitif, et HSL lorsque sa structure et la notation CSS hsl() servent la tâche.
- Enregistrez une valeur HEX ou RGB exacte pour la transmission, puis testez contraste et écart perceptuel avec leurs méthodes dédiées.
Une famille de couleur, trois rôles distincts
Ces modèles réorganisent les couleurs d’écran pour répondre à des décisions différentes. Leurs valeurs repères évitent de déplacer des nombres entre outils à l’aveugle.
| Modèle | Troisième canal | Repères utiles | Rôle courant |
|---|---|---|---|
| HSB / HSV | Brightness / Value | Teinte pure à S 100 %, B/V 100 % ; noir à B/V 0 % | Sélecteurs, outils d’image, réglage visuel de teinte, intensité et obscurité |
| HSL | Lightness | Teinte pure à S 100 %, L 50 % ; noir à L 0 % ; blanc à L 100 % | Valeurs CSS hsl() et variantes claires ou sombres autour d’un milieu |
| HEX / RGB | Canaux rouge, vert et bleu | Un triplet sRGB explicite après conversion | Transmission web stable, jetons de design et dossiers d’implémentation |
Pourquoi les noms paraissent plus interchangeables qu’ils ne le sont
HSB, HSV et HSL commencent tous par la teinte, généralement exprimée par un angle autour d’un cercle chromatique. Ils possèdent aussi un canal appelé saturation. Ce vocabulaire commun donne l’impression que les coordonnées sont compatibles. En réalité, chaque modèle réorganise des coordonnées RGB d’affichage ; aucun ne mesure indépendamment la lumière physique. Le travail fondateur sur les transformations HSV et HSL décrivait deux géométries différentes pour parcourir plus facilement un cube RGB. Une étiquette partagée ne rend donc pas les calculs, les points de référence ou les coordonnées interchangeables.
La lecture la plus sûre est opérationnelle. Un modèle indique à un outil comment convertir trois commandes en sortie rouge, verte et bleue. Si deux applications appliquent la même conversion et le même arrondi, leur RGB ou HEX final peut correspondre même si l’une écrit HSB et l’autre HSV. Dès qu’un champ utilise HSL, le calcul de la saturation et du troisième canal change. Copier 210°, 70 %, 80 % d’un modèle à l’autre peut modifier l’échantillon alors que tous les nombres visibles restent identiques. Il faut donc transmettre le modèle et la valeur convertie ensemble.
Comment HSB et HSV décrivent brightness ou value
Dans le modèle HSV courant, value correspond au maximum des canaux rouge, vert et bleu normalisés. HSB donne habituellement à cette même commande le nom plus familier de brightness. Avec saturation et brightness à 100 %, la teinte choisie atteint sa couleur de bord RGB la plus intense. Réduire brightness rapproche le résultat du noir. Réduire la saturation le rapproche d’une valeur neutre tout en conservant son plafond de brightness. À saturation nulle et brightness maximale, le résultat est blanc, et non une couleur vive. Les trois canaux déterminent ensemble une seule couleur.
Cette organisation convient à un sélecteur bidimensionnel : choisissez la teinte sur une bande, puis déplacez-vous horizontalement pour la saturation et verticalement pour brightness. Le sélecteur Adobe actuel documente cette interaction HSB avec une teinte de 0 à 360° et deux pourcentages. Elle est intuitive pour l’édition, mais brightness ne signifie ni luminance mesurée ni promesse de clarté perçue. Un jaune et un bleu peuvent afficher B 100 % tout en ayant des luminances relatives très différentes. Le canal est un contrôle d’édition, pas une preuve perceptuelle ou d’accessibilité.
Comment HSL modifie le milieu et les deux extrêmes
HSL conserve le cercle de teinte mais définit un axe de lightness avec le noir à 0 %, le blanc à 100 % et la teinte pure totalement saturée à 50 %. Au-dessus du milieu, la couleur avance vers le blanc ; en dessous, vers le noir. Cette symétrie aide à raisonner sur les teintes claires et les ombres autour d’une base. Elle explique aussi pourquoi une brightness HSB de 100 % ne peut pas devenir une lightness HSL de 100 % : la première peut être un rouge vif, tandis que la seconde est toujours blanche.
La saturation change également avec cette géométrie. En HSL, une couleur très proche du blanc ou du noir dispose de peu de chroma, même si son champ saturation affiche 100 %. En HSV, la saturation est calculée relativement au canal value. La spécification CSS Color du W3C définit hsl() comme une manière de produire des couleurs sRGB et fournit le comportement suivi par les navigateurs. Elle ne définit pas de fonction CSS standard hsv() ou hsb(). Une teinte choisie en HSB doit donc être convertie vers HEX, RGB, HSL ou une autre notation CSS acceptée puis vérifiée.
Comment transmettre une couleur du sélecteur au code sans ambiguïté
Commencez par noter le modèle, l’application, le profil couleur ou l’hypothèse web et le triplet exact. Enregistrez ensuite le HEX à six chiffres ou le RGB obtenu. Cette valeur de canal finale est le relais le plus sûr, car elle empêche un autre outil d’interpréter silencieusement des pourcentages HSB comme du HSL. Si l’auteur CSS préfère hsl(), il doit convertir depuis le RGB approuvé et vérifier le résultat du navigateur, pas copier les champs par position. Gardez assez de précision pour reproduire la teinte sans prétendre que des décimales corrigent une capture ou un écran non calibré.
Terminez en nommant la décision que chaque valeur peut soutenir. HSB ou HSL explique une correction. HEX ou RGB préserve un jeton numérique. Delta E résume l’écart d’une paire sous une formule nommée. Le contraste WCAG emploie la luminance relative et des critères définis pour un premier plan et un arrière-plan. Aucun résultat ne remplace automatiquement les autres. Un dossier fiable contient la source, le modèle, la valeur convertie, le contexte visible, la méthode d’évaluation, l’autorité qui possède la règle finale et la prochaine action attendue.
Un flux couleur sûr en cinq étapes
Utilisez cette séquence lorsqu’une couleur passe d’un sélecteur, d’une capture ou d’un fichier de design au code ou à une palette partagée.
1. Nommer le modèle
Écrivez HSB, HSV, HSL, RGB ou le modèle exact près des valeurs, plutôt que de partager un triplet sans étiquette.
2. Préserver la source
Gardez le jeton approuvé ou le fichier original et notez si la couleur a été échantillonnée, convertie ou créée visuellement.
3. Sauver RGB ou HEX
Capturez la sortie convertie pour qu’une autre application reproduise les mêmes canaux sRGB sans deviner le modèle.
4. Vérifier en contexte
Affichez la couleur à sa taille, dans son thème, avec ses voisines, son état et son écran réels avant validation.
5. Lancer le bon test
Utilisez contraste, Delta E, mesure d’impression ou règle du projet ; un canal de sélecteur ne constitue pas une preuve.
Smith · W3C · Adobe
Sources primaires et définitions de plateforme
Ces références décrivent les transformations d’origine, le sélecteur HSB actuel, la syntaxe HSL des navigateurs et la règle de contraste séparée.
Comparer les modèles, puis tester la couleur
Questions sur HSB, HSV et HSL
HSB et HSV sont-ils toujours identiques ?
Ils désignent généralement le même modèle, brightness et value étant deux noms. Vérifiez documentation, plages, profil et arrondi avant un transfert exact.
Pourquoi B 100 % en HSB ne vaut-il pas L 100 % en HSL ?
HSB peut afficher une teinte pure et saturée avec B 100 %. HSL réserve L 100 % au blanc et place la teinte pure à L 50 %.
CSS peut-il utiliser HSB ou HSV directement ?
CSS Color définit hsl(), mais pas de fonction standard hsb() ou hsv(). Convertissez la teinte vers HEX, RGB, HSL ou un autre format CSS accepté.
Quel modèle convient le mieux à un sélecteur ?
HSB ou HSV est courant pour une bande de teinte et un champ saturation-brightness. HSL peut être plus lisible pour des variantes CSS. Choisissez selon la décision et sauvegardez une sortie exacte.
Une même lightness HSB ou HSL garantit-elle le même contraste ?
Non. Aucun canal n’est un ratio de contraste WCAG. Évaluez le premier plan et l’arrière-plan réels avec la méthode de luminance relative requise.