# Teintes, tons et nuances : construire une échelle de couleurs

[Canonical HTML page](https://gradiently.design/fr/guide/tints-tones-shades)

Une seule couleur de marque ne suffit jamais pour concevoir. Les teintes, les tons et les nuances en font toute une famille, et une bonne échelle permet à une palette de porter texte, boutons, fonds et graphiques.

## The short version

- Les teintes, les tons et les nuances sont trois façons de faire varier une couleur : une teinte ajoute du blanc, un ton ajoute du gris et une nuance ajoute du noir.
- Les teintes paraissent plus claires et plus douces, les tons plus calmes et plus sourds, les nuances plus profondes et plus sérieuses.
- Une échelle de couleurs est une rangée de teintes et de nuances d’une même couleur, en général numérotée de 50 ou 100 pour la plus claire à 900 pour la plus sombre.
- Mélanger dans un espace colorimétrique perceptuel comme OKLCH garde les paliers d’une échelle visuellement réguliers.
- Une bonne échelle donne un rôle à chaque palier, comme les fonds, les bordures, le texte et les survols, et vérifie le contraste entre les paliers qui se rencontreront.

Les **teintes, tons et nuances** sont les trois façons de changer une couleur sans changer sa tonalité. Une **teinte** est la couleur mêlée de blanc : elle devient plus claire et plus douce. Une **nuance** est la couleur mêlée de noir : elle devient plus profonde. Un **ton** est la couleur mêlée de gris : il devient plus discret et plus sourd. Voyez les teintes, tons et nuances comme du blanc, du gris et du noir ajoutés à une même couleur. Rangez une série de teintes et de nuances dans l’ordre et vous obtenez une échelle de couleurs : l’outil qui transforme une seule couleur de marque en quelque chose avec quoi l’on peut vraiment concevoir.

## Teinte, ton et nuance côte à côte

Le plus simple pour voir la différence est de partir d’une couleur et de la pousser dans trois directions. Ici, la base est un violet, `#7c3aed`, mélangé par paliers de 20 %.

| Type | Mêlé de | Effet | Exemple à partir de #7c3aed |
| --- | --- | --- | --- |
| Teinte | Blanc | Plus clair, plus doux, plus aérien | `#b089f4` à 40 % de blanc |
| Ton | Gris | Sourd, plus calme, plus naturel | `#7e64ac` à 60 % de gris |
| Nuance | Noir | Plus profond, plus lourd, plus sérieux | `#4a238e` à 40 % de noir |

La tonalité reste violette dans tous les cas. Seules la luminosité et la saturation changent.

- Teinte 90 %: #f2ebfd
- Teinte 60 %: #cbb0f8
- Teinte 20 %: #9661f1
- Violet de base: #7c3aed
- Nuance 20 %: #632ebe
- Nuance 60 %: #32175f
- Nuance 80 %: #190c2f

Les teintes à gauche, les nuances à droite. Cette rangée est déjà l’essentiel d’une échelle utilisable.

- Violet de base: #7c3aed
- Ton 20 %: #7d48d7
- Ton 40 %: #7e56c1
- Ton 60 %: #7e64ac
- Ton 80 %: #7f7296

Les tons gardent à peu près la même luminosité et perdent plutôt leur couleur, c’est pourquoi les palettes fondées sur les tons paraissent calmes et adultes.

## Ce que les teintes, tons et nuances font à un design

Chaque direction change l’ambiance autant que la couleur. Les teintes paraissent douces, jeunes et ouvertes, c’est pourquoi [les palettes pastel](https://gradiently.design/fr/guide/pastel-color-palettes) sont surtout faites de teintes. Les nuances paraissent riches, sérieuses et haut de gamme, le territoire des [palettes de couleurs sombres](https://gradiently.design/fr/guide/dark-color-palettes). Les tons paraissent adultes et naturels, la base de presque toutes les [palettes de couleurs sourdes](https://gradiently.design/fr/guide/muted-color-palettes).

- Teintes : douces et ouvertes: `linear-gradient(135deg, #f2ebfd 0%, #cbb0f8 60%, #9661f1 100%)`
- Tons : calmes et adultes: `linear-gradient(135deg, #b5a8cb 0%, #7e64ac 60%, #5f5079 100%)`
- Nuances : profondes et sérieuses: `linear-gradient(135deg, #632ebe 0%, #32175f 60%, #190c2f 100%)`

Le même violet poussé dans trois directions. Les teintes allègent l’ambiance, les tons l’apaisent et les nuances lui donnent du poids.

## Construire une échelle de couleurs à partir d’un hex

La plupart des design systems numérotent leur échelle de 50 ou 100 (le plus clair) à 900 (le plus sombre), avec la couleur de marque autour de 500. La constance compte plus que les numéros : chaque couleur du système doit avoir les mêmes paliers, pour que `200` veuille toujours dire un fond clair et `700` toujours du texte. Cinq paliers bien choisis valent mieux que onze que personne ne distingue, et vous pourrez ajouter les intermédiaires quand de vrais designs montreront où ils manquent.

1. **Placez votre couleur de marque** Décidez à quel palier elle appartient. Une couleur moyenne comme `#7c3aed` se place à 500 ; un bleu marine de marque très sombre peut se placer à 800.
2. **Créez l’extrémité claire** Mélangez vers le blanc pour aller de 400 à 50. Le palier le plus clair doit être à peine coloré, assez clair pour un fond de page.
3. **Créez l’extrémité sombre** Mélangez vers le noir pour aller de 600 à 900. Le palier le plus sombre doit être assez sombre pour du texte courant sur le plus clair.
4. **Égalisez les paliers** Regardez la rangée de loin. Si deux voisins paraissent presque identiques et qu’un autre écart ressemble à un saut, ajustez-les à l’œil.
5. **Décalez légèrement la tonalité aux extrémités** Le noir pur peut salir les nuances. Beaucoup de designers poussent les paliers sombres de quelques degrés vers le bleu ou le violet, et les paliers clairs vers le chaud.
6. **Vérifiez les paires qui se rencontreront** Testez le contraste des paliers de texte sur les paliers de fond, avec [contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) comme guide.

| Palier | Hex | Rôle typique |
| --- | --- | --- |
| 50 | `#f2ebfd` | Fond de page ou de carte |
| 100 | `#e5d8fb` | Remplissages discrets, lignes sélectionnées |
| 200 | `#cbb0f8` | Bordures, séparateurs, états désactivés |
| 400 | `#9661f1` | Icônes, grandes formes décoratives |
| 500 | `#7c3aed` | Couleur de marque, boutons principaux |
| 600 | `#632ebe` | Survol des boutons, liens |
| 700 | `#4a238e` | Titres sur fond clair |
| 800 | `#32175f` | Texte courant sur les teintes |
| 900 | `#190c2f` | Fond du mode sombre |

Une échelle violette avec un rôle pour chaque palier. Le blanc sur 500 donne environ 5,7:1 et le palier 800 sur le palier 100 environ 10,9:1, tous deux au-dessus de la recommandation de 4,5:1.

## Créer des teintes et des nuances en CSS

Plus besoin de calculer chaque palier à la main. La fonction CSS `color-mix()` mélange deux couleurs dans l’espace colorimétrique choisi, si bien qu’une échelle entière peut suivre une seule variable. Mélanger en OKLCH garde les paliers plus réguliers à l’œil qu’en sRGB simple, un point traité dans [OKLCH expliqué](https://gradiently.design/fr/guide/oklch-explained). Les navigateurs la gèrent largement ; consultez [color-mix() sur MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) pour les détails.

```css
:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}
```

Changez `--brand` et chaque teinte, nuance et ton se met à jour avec elle.

## Teintes et nuances dans les dégradés

Les dégradés les plus nets ne sont souvent qu’une seule couleur qui va de la teinte à la nuance. Comme rien ne traverse le cercle chromatique, il n’y a pas de bande grise au milieu, et le résultat se lit comme une lumière qui tombe sur une seule matière. [Les palettes monochromes](https://gradiently.design/fr/guide/monochromatic-color-scheme) appliquent la même idée à des palettes entières.

- Violet, de la teinte à la nuance: `linear-gradient(160deg, #f2ebfd 0%, #9661f1 50%, #32175f 100%)`
- Violet, éclairé d’en haut: `radial-gradient(circle at 30% 25%, #cbb0f8 0%, #7c3aed 45%, #190c2f 100%)`
- Terre cuite, de la teinte à la nuance: `linear-gradient(135deg, #fae8e1 0%, #e0663a 55%, #5a2917 100%)`
- Teinte lilas vers ton violet: `linear-gradient(135deg, #e5d8fb 0%, #7f7296 100%)`

Des fondus d’une seule couleur. Chacun n’emprunte qu’à sa propre échelle.

Un Mark Gradiently fonctionne de façon semblable : une recette de couleurs apparentées traversée de lumière. Quand vous concevez dessus, les couleurs près de vos mots se creusent ou s’éclaircissent pour que le texte reste lisible sans cadre derrière lui.

## FAQ

### Quelle différence entre une teinte, un ton et une nuance ?

Une teinte est une couleur mêlée de blanc, un ton une couleur mêlée de gris et une nuance une couleur mêlée de noir.

### Un pastel est-il une teinte ?

Oui. Les pastels sont des teintes : des couleurs éclaircies avec beaucoup de blanc, ce qui les rend douces et peu intenses.

### Combien de paliers pour une échelle de couleurs ?

La plupart des design systems utilisent neuf à onze paliers, numérotés de 50 ou 100 à 900. Moins de paliers peuvent suffire pour de petits projets, tant que chacun a un rôle clair.

### Comment obtenir une nuance plus sombre d’une couleur en CSS ?

Utilisez `color-mix(in oklch, yourcolour 70%, black)` et ajustez le pourcentage. Plus il est bas, plus la nuance est sombre.

### Pourquoi mes nuances paraissent-elles boueuses ?

Mélanger avec du noir pur retire aussi de la saturation. Mélangez en OKLCH, et essayez de pousser légèrement les paliers les plus sombres vers le bleu ou le violet pour les garder riches.