L’essentiel en bref
- Teinte, saturation et luminosité, ou HSB, décrivent une couleur avec trois nombres : la teinte est son angle sur le cercle, la saturation son intensité et la luminosité sa quantité de lumière.
- Le HSB s’appelle aussi HSV (ou TSV en français), où V signifie valeur ; les deux noms désignent le même modèle.
- Le HSL est un proche parent dans lequel une luminosité de 50 pour cent donne la couleur pure et 100 pour cent donne toujours du blanc.
- Les outils de design comme Figma et Photoshop proposent des sélecteurs HSB, alors que le CSS prend en charge hsl() mais pas le HSB.
- Ni le HSB ni le HSL ne correspondent à la clarté perçue par l’œil : des modèles perceptuels comme OKLCH conviennent mieux pour construire des gammes régulières.
Sur cette page
Teinte, saturation, luminosité (HSB, pour hue, saturation, brightness) est une façon de décrire n’importe quelle couleur avec trois curseurs simples. La teinte indique de quelle couleur il s’agit, sous forme d’angle de 0 à 360 degrés sur le cercle chromatique. La saturation indique son intensité, du gris à 0 pour cent à la couleur pleine à 100 pour cent. La luminosité indique sa quantité de lumière, du noir à 0 pour cent à la version la plus lumineuse de cette couleur à 100 pour cent. Une fois que vous voyez les couleurs ainsi, ajuster une palette n’a plus rien d’un pari.
La teinte : quelle couleur
La teinte est une position sur le cercle chromatique. Sur les cercles d’écran, le rouge est à 0 degré, le vert à 120 et le bleu à 240, avec le jaune, le cyan et le magenta entre eux. Comme la teinte est un angle, les harmonies de couleurs deviennent de l’arithmétique simple : ajoutez 180 degrés pour une complémentaire, 120 pour une triade.
linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)La saturation : quelle force
La saturation règle la quantité de teinte présente. Baissez-la et la couleur se vide vers le gris ; augmentez-la et la couleur devient vive. La plupart des palettes raffinées restent bien en dessous de la saturation maximale. Les couleurs pleinement saturées crient, ce qui convient à une étiquette de soldes et fatigue sur tout un site. Les palettes de couleurs sourdes sont surtout une histoire de saturation plus basse.
La luminosité : quelle quantité de lumière
En HSB, la luminosité indique à quel point la couleur est éclairée. À 0 pour cent, toute couleur est noire, quelles que soient la teinte et la saturation. À 100 pour cent, vous obtenez la version la plus lumineuse que l’écran peut afficher pour cette teinte et cette saturation. Pour obtenir un pastel pâle en HSB, gardez une luminosité élevée et baissez la saturation, ce qui ajoute du blanc. C’est exactement l’idée des teintes, tons et nuances.
HSB ou HSL : la différence qui piège tout le monde
Le HSL semble presque identique : teinte, saturation, lightness (clarté). La teinte est la même. C’est le troisième curseur qui diffère. En HSL, une clarté de 50 pour cent donne la couleur pure, 0 pour cent le noir et 100 pour cent toujours le blanc. En HSB, une luminosité de 100 pour cent donne la couleur pure quand la saturation est maximale, et on n’atteint le blanc qu’en baissant aussi la saturation. Les valeurs de saturation diffèrent aussi entre les deux : une même couleur a donc des valeurs différentes dans chaque modèle.
Hex
#ff0000HSB
HSL
#7c3aedHSB
HSL
Hex
#0f766eHSB
HSL
Hex
#f97316HSB
HSL
#ffffffHSB
HSL
HSB (aussi appelé HSV ou TSV)
- Luminosité 100 % avec saturation 100 % donne la couleur pure
- Le blanc exige luminosité 100 % et saturation 0 %
- Utilisé par de nombreux sélecteurs d’outils de design, dont Photoshop et Figma
- Pas disponible directement en CSS
HSL
- Clarté 50 % donne la couleur pure
- Clarté 100 % donne toujours du blanc
- S’écrit nativement en CSS avec
hsl() - Pratique pour créer des versions plus claires et plus foncées
Utiliser le HSL en CSS
Le CSS comprend directement hsl(), ce qui le rend pratique pour les thèmes. Gardez la teinte dans une variable et vous pouvez décaler la couleur de toute une interface avec un seul nombre. Il existe aussi hwb() (teinte, blancheur, noirceur), plus proche du HSB dans l’esprit. Les détails sont sur la page hsl() de MDN, et les couleurs HSL vont plus loin.
:root {
--hue: 262;
--brand: hsl(var(--hue) 83% 58%); /* #7c3aed */
--brand-soft: hsl(var(--hue) 83% 92%);
--brand-deep: hsl(var(--hue) 70% 28%);
--brand-muted: hsl(var(--hue) 25% 55%);
}
/* Change --hue to 175 and the whole set turns teal */Pourquoi une clarté égale ne paraît pas égale
Le HSB et le HSL relèvent de la géométrie, pas de la perception. Le jaune pur et le bleu pur ont tous deux une clarté HSL de 50 pour cent, et pourtant le jaune paraît bien plus lumineux : selon la formule WCAG, sa luminance relative est d’environ 0,93 contre 0,07 pour le bleu. Posez du texte blanc sur chacun et la différence saute aux yeux. C’est pourquoi une palette construite par paliers réguliers de clarté HSL peut paraître irrégulière, et pourquoi le contraste du texte doit toujours être vérifié, jamais supposé.
Les modèles perceptuels corrigent cela. OKLCH garde l’idée accessible de clarté, chroma et teinte, mais sa clarté suit ce que voit l’œil, si bien que les paliers paraissent réguliers. Pour des retouches rapides, le HSB et le HSL sont parfaits ; pour une gamme de marque ou un dégradé sans milieu terne, passez à OKLCH.
Ajuster rapidement une couleur avec le HSB
- Trop criarde : baissez la saturation de 15 à 25 points avant de toucher à autre chose.
- Trop terne : augmentez légèrement la saturation, ou décalez la teinte de quelques degrés vers le chaud.
- Besoin d’un état de survol : baissez la luminosité d’environ 10 points.
- Besoin d’une teinte de fond : gardez la teinte, baissez fortement la saturation et poussez la luminosité près de 100.
- Deux couleurs jurent : rapprochez une teinte de l’autre, ou atténuez l’une des deux.
Si vous préférez partir d’un style fini plutôt que de trois curseurs, le Marché de Gradiently vous permet de chercher des Marks par mots de couleur comme « bleu canard profond » ou « pêche chaude ».
Les questions qu’on nous pose
Que sont la teinte, la saturation et la luminosité ?
La teinte est l’angle d’une couleur sur le cercle chromatique, la saturation son intensité et la luminosité sa quantité de lumière. Ensemble, elles décrivent n’importe quelle couleur d’écran.
Le HSB est-il la même chose que le HSV ?
Oui. HSV signifie hue, saturation, value (teinte, saturation, valeur), et la valeur signifie la même chose que la luminosité.
Quelle est la différence entre HSB et HSL ?
En HSB, une luminosité de 100 pour cent à saturation maximale donne la couleur pure. En HSL, une clarté de 50 pour cent donne la couleur pure et 100 pour cent donne le blanc.
Peut-on utiliser le HSB en CSS ?
Pas directement. Le CSS prend en charge hsl(), hwb() et oklch() : convertissez les valeurs HSB dans l’un de ces formats.
Quelle est la différence entre teinte et saturation ?
La teinte indique de quelle couleur il s’agit, comme le rouge ou le bleu. La saturation indique la force de cette couleur, du gris au vif.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil