# Teinte, saturation, luminosité (HSB) expliquées simplement

[Canonical HTML page](https://gradiently.design/fr/guide/hue-saturation-brightness)

Les codes hex sont faits pour les machines. Teinte, saturation et luminosité, c’est ainsi que les gens pensent vraiment la couleur : quelle couleur, quelle force, quelle clarté. Maîtrisez ces trois curseurs et tous les sélecteurs de couleur deviennent clairs.

## The short version

- 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.

**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](https://gradiently.design/fr/guide/color-wheel). 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.

Teinte de 0 à 360 degrés: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)`

Toute la plage de teintes à saturation et luminosité maximales. La bande commence et finit sur le rouge, car la teinte est un cercle.

## 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](https://gradiently.design/fr/guide/muted-color-palettes) sont surtout une histoire de saturation plus basse.

- Saturation 0 %: #808080
- Saturation 25 %: #7f609f
- Saturation 50 %: #7f40bf
- Saturation 75 %: #7f20df
- Saturation 100 %: #7f00ff

Une seule teinte violette à luminosité fixe, seule la saturation change. À gauche le gris pur, à droite la couleur pleine.

## 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](https://gradiently.design/fr/guide/tints-tones-shades).

## 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.

| Couleur | Hex | HSB | HSL |
| --- | --- | --- | --- |
| Rouge pur | `#ff0000` | 0°, 100 %, 100 % | 0°, 100 %, 50 % |
| Violet | `#7c3aed` | 262°, 76 %, 93 % | 262°, 83 %, 58 % |
| Sarcelle profond | `#0f766e` | 175°, 87 %, 46 % | 175°, 77 %, 26 % |
| Orange vif | `#f97316` | 25°, 91 %, 98 % | 25°, 95 %, 53 % |
| Blanc | `#ffffff` | Toute teinte, 0 %, 100 % | Toute teinte, toute saturation, 100 % |

La teinte concorde ; la saturation et la troisième valeur, non. Vérifiez toujours le modèle utilisé par un sélecteur avant de copier des nombres.

### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), et [les couleurs HSL](https://gradiently.design/fr/guide/hsl-colors) vont plus loin.

```css
: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 */
```

Une teinte, quatre rôles. La clarté crée les versions douce et profonde ; la saturation crée la version sourde.

## 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é.

- Jaune, HSL 60° 100 % 50 %: #ffff00
- Vert, HSL 120° 100 % 50 %: #00ff00
- Rouge, HSL 0° 100 % 50 %: #ff0000
- Bleu, HSL 240° 100 % 50 %: #0000ff

Quatre couleurs exactement à la même clarté HSL. Sur du blanc, le jaune atteint environ 1,07:1 et le bleu environ 8,6:1.

Les modèles perceptuels corrigent cela. [OKLCH](https://gradiently.design/fr/guide/oklch-explained) 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](https://gradiently.design/fr/guide/gradient-interpolation), 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 ».

## FAQ

### 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.