# Palette monochromatique : une teinte, toute une identité

[Canonical HTML page](https://gradiently.design/fr/guide/monochromatic-color-scheme)

Une seule teinte semble limitante, jusqu’à ce qu’on voie l’étendue qu’elle contient. Bien construite, une couleur unique couvre arrière-plans, texte, boutons et dégradés, et paraît plus distinctive qu’un arc-en-ciel.

## The short version

- Une palette monochromatique utilise une seule teinte déclinée en luminosité et en saturation, construite avec des nuances claires, des nuances foncées et des tons grisés.
- Une nuance claire est une teinte mélangée à du blanc, une nuance foncée une teinte mélangée à du noir et un ton grisé une teinte mélangée à du gris.
- Une rampe monochromatique utile compte environ neuf ou dix paliers, du presque blanc au presque noir, régulièrement espacés en luminosité perçue.
- Décaler légèrement la teinte vers les extrémités claire et sombre évite qu’une palette monochromatique paraisse sans vie.
- Les palettes monochromatiques donnent des dégradés calmes et cohérents, mais les fondus lents d’une seule teinte forment facilement des bandes et gagnent à recevoir un grain fin.

Une **palette monochromatique** utilise une teinte et rien d’autre, déclinée en luminosité et en saturation. Pensez au marine, au cobalt, au bleu ciel et à la glace : tout est bleu, tout est clairement lié, et il y a assez de contraste entre eux pour gérer arrière-plans, texte et accents. Comme toutes les couleurs partagent la même teinte, une palette monochromatique paraît toujours unifiée. Le travail consiste à construire assez d’amplitude à l’intérieur de cette teinte.

Ce guide couvre les trois façons de faire varier une teinte, comment construire une rampe avec laquelle on peut vraiment créer, et comment le monochrome fonctionne dans les dégradés. Pour le contexte général, voyez les [bases de la théorie des couleurs](https://gradiently.design/fr/guide/color-theory-basics).

## Nuances claires, nuances foncées et tons grisés

Chaque couleur d’une palette monochromatique vient de l’un de trois gestes. Une **nuance claire** ajoute du blanc, ce qui rend la couleur plus légère et plus douce. Une **nuance foncée** ajoute du noir, ce qui la rend plus profonde. Un **ton grisé** ajoute du gris, ce qui la calme sans beaucoup changer sa luminosité.

- Nuances claires : vers le blanc: `linear-gradient(90deg, #2563eb 0%, #ffffff 100%)`
- Nuances foncées : vers le noir: `linear-gradient(90deg, #2563eb 0%, #000000 100%)`
- Tons grisés : vers le gris: `linear-gradient(90deg, #2563eb 0%, #7a7a7a 100%)`

Un bleu, trois directions. La plupart des palettes monochromatiques utilisent les trois.

## Comment construire une palette monochromatique

Une poignée de nuances claires prises au hasard n’est pas une palette. Ce qu’il vous faut, c’est une rampe : une suite de paliers du presque blanc au presque noir, régulièrement espacés pour que chaque palier paraisse aussi différent de son voisin que le précédent. Neuf à onze paliers est une taille courante, et c’est celle de la plupart des systèmes de design.

- Turquoise 50: #f0fdfa
- Turquoise 100: #ccfbf1
- Turquoise 200: #99f6e4
- Turquoise 300: #5eead4
- Turquoise 400: #2dd4bf
- Turquoise 500: #14b8a6
- Turquoise 600: #0d9488
- Turquoise 700: #0f766e
- Turquoise 800: #115e59
- Turquoise 900: #134e4a

Une rampe turquoise en dix paliers. Paliers clairs pour les arrière-plans, moyens pour la couleur, sombres pour le texte.

1. **Choisissez la teinte centrale** Prenez la version de la couleur que vous préférez à pleine intensité. Elle devient le milieu de la rampe.
2. **Fixez les extrémités** Choisissez un presque blanc avec une pointe de la teinte et un presque noir avec une pointe de la teinte. Évitez le blanc pur et le noir pur : ils paraissent déconnectés.
3. **Remplissez les paliers selon la luminosité** Espacez les paliers d’après leur clarté apparente, pas selon des valeurs hex ou HSL égales. Les espaces perceptifs comme OKLCH le rendent facile ; voyez les [dégradés OKLCH](https://gradiently.design/fr/guide/css-gradient-oklch).
4. **Baissez la saturation aux extrémités** Les paliers très clairs et très sombres paraissent meilleurs légèrement adoucis. Une saturation pleine aux extrêmes paraît criarde ou boueuse.
5. **Décalez un peu la teinte** Laissez l’extrémité claire dériver légèrement vers le chaud ou le froid, et l’extrémité sombre dans l’autre sens. Cela ajoute de la vie sans casser la palette.

### Pourquoi un léger décalage de teinte aide

Les objets réels s’assombrissent rarement en ajoutant simplement du noir : les ombres captent la lumière plus froide ou plus chaude de leur environnement. Une rampe qui se contente de mélanger noir et blanc paraît plate en comparaison. Décaler la teinte de quelques degrés le long de la rampe est une pratique courante en illustration et dans les systèmes de design.

- Rampe simple : blanc et noir seulement: `linear-gradient(90deg, #d3e0fb 0% 20%, #7ca1f3 20% 40%, #2563eb 40% 60%, #1a45a5 60% 80%, #0f285e 80% 100%)`
- Teinte décalée : ciel et indigo: `linear-gradient(90deg, #e0f7ff 0% 20%, #7cc4f5 20% 40%, #2563eb 40% 60%, #2f3aa8 60% 80%, #1e1b4b 80% 100%)`

Deux rampes de bleu en cinq paliers autour du même centre, `#2563eb`. La seconde dérive vers le ciel côté clair et vers l’indigo côté sombre : elle paraît éclairée plutôt que mélangée.

## Bâtir toute une identité sur une teinte

Une marque monochromatique peut être étonnamment distinctive, car elle est disciplinée comme la plupart des marques ne le sont pas. L’astuce est de donner un rôle à chaque palier de la rampe et de s’y tenir.

| Palier de la rampe | Rôle |
| --- | --- |
| 50 à 100 | Arrière-plans de page et de carte |
| 200 à 300 | Bordures, séparateurs, aplats discrets |
| 400 à 600 | Couleur de marque, boutons, illustration |
| 700 à 800 | Titres, liens, aplats forts |
| 900 et plus sombre | Texte courant, arrière-plans du mode sombre |

Rôles d’une rampe monochromatique. Le texte et l’arrière-plan viennent d’extrémités opposées, là où vit le contraste.

Associez toujours texte et arrière-plan à partir d’extrémités opposées de la rampe. Deux paliers du milieu sont ravissants en échantillons et échouent en texte ; vérifiez avec les recommandations du [contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility). Notez la rampe, avec le rôle de chaque palier, dans votre [kit de marque](https://gradiently.design/fr/guide/brand-kit) pour que tout le monde utilise les mêmes valeurs.

Un post éditorial en portrait avec un titre en empattements sur un arrière-plan doux d’une seule teinte

Un champ calme d’une seule famille sous une typographie éditoriale.

Un large en-tête d’e-mail avec un titre sur un arrière-plan calme d’une seule teinte

Le même style transposé sur un en-tête d’e-mail.

Il manque une chose à une identité monochromatique : un accent évident. Si vos designs ont besoin qu’un bouton ou un prix saute aux yeux, autorisez une couleur extérieure à la teinte et utilisez-la rarement. Vous vous rapprochez alors d’une [palette analogue](https://gradiently.design/fr/guide/analogous-colors) ou d’un monochrome accentué, tous deux parfaitement valables.

## Dégradés monochromatiques

Les dégradés d’une seule teinte sont parmi les plus élégants que l’on puisse faire : ils évoquent de la lumière qui tombe sur une seule matière. Ils ne deviennent jamais boueux, car aucune seconde teinte ne vient les contrarier.

- Bleu de minuit: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 55%, #3b82f6 100%)`
- Rose: `linear-gradient(135deg, #4c0519 0%, #be123c 50%, #fda4af 100%)`
- Sauge: `linear-gradient(160deg, #1f2e24 0%, #4b6b55 55%, #c9dbc8 100%)`
- Sable: `linear-gradient(135deg, #5c4630 0%, #b08d63 55%, #efe3cf 100%)`
- Lueur violette: `radial-gradient(circle at 30% 30%, #c4b5fd 0%, #7c3aed 40%, #2e1065 100%)`
- Graphite (aucune teinte): `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #525252 100%)`

Six dégradés d’une seule teinte. Chacun ne bouge qu’en luminosité et un peu en saturation.

> **Attention au banding** Comme un dégradé monochromatique change lentement, il a moins de niveaux de couleur à répartir sur l’écran et forme facilement des bandes visibles, surtout dans les bleus et les gris sombres. Une fine couche de grain règle le problème ; voyez le [banding des dégradés](https://gradiently.design/fr/guide/gradient-banding).

## FAQ

### Qu’est-ce qu’une palette monochromatique ?

Une palette monochromatique utilise une seule teinte déclinée en nuances claires, foncées et grisées, du très clair au très sombre.

### Quelle différence entre nuance claire, nuance foncée et ton grisé ?

Une nuance claire est une teinte mélangée à du blanc, une nuance foncée est mélangée à du noir et un ton grisé est mélangé à du gris.

### Le noir et blanc est-il une palette monochromatique ?

À proprement parler, le noir, le blanc et le gris sont achromatiques, c’est-à-dire sans teinte. Dans l’usage courant, on les appelle souvent monochromes, et ils suivent les mêmes principes.

### Combien de couleurs dans une palette monochromatique ?

Environ neuf à onze paliers, du presque blanc au presque noir, donnent assez d’amplitude pour les arrière-plans, le texte, les bordures et la couleur de marque.

### Une marque peut-elle n’utiliser qu’une seule couleur ?

Oui, si la palette a toute l’amplitude de luminosité et que chaque palier a un rôle clair. Beaucoup de marques à couleur unique ajoutent un petit accent pour les appels à l’action.