# Dégradés monochromes : une teinte, mille nuances

[Canonical HTML page](https://gradiently.design/fr/guide/monochrome-gradient)

Une seule couleur qui ne bouge qu’en clarté : c’est le dégradé le plus discret qui soit, et celui qui révèle chaque défaut. Voici des codes qui marchent, le CSS qui garde la teinte fidèle et la solution au banding.

## The short version

- Un dégradé monochrome fond une seule teinte du sombre au clair, ou va du noir au blanc par des gris.
- Un dégradé monochrome est un seul fondu, alors qu’un schéma de couleurs monochromatique est une palette entière construite sur une teinte.
- Définir les arrêts en oklch avec une teinte fixe empêche un dégradé d’une seule couleur de dériver vers le gris ou une autre teinte.
- Les dégradés monochromes sombres montrent le plus de banding, car un écran 8 bits a très peu de paliers distincts entre les tons proches du noir.
- Une légère couche de grain sur un dégradé monochrome masque le banding et lui donne l’air d’une surface.

Un **dégradé monochrome** fond une teinte à travers ses propres nuances, du profond au clair, sans introduire de seconde couleur. Du noir au blanc par le gris en est la version la plus pure ; un marine qui monte vers un bleu pâle, ou une aubergine qui s’éclaircit en lilas, sont aussi des dégradés monochromes. Ils paraissent calmes et chers parce que rien ne leur fait concurrence, et pour la même raison ils montrent chaque défaut : banding, milieux boueux et teinte qui dérive à mi-chemin. Les codes et le CSS ci-dessous évitent les trois.

Anthracite vers argent: `linear-gradient(180deg, #0a0a0a 0%, #2b2b2b 45%, #6e6e6e 80%, #b5b5b5 100%)`

Un dégradé noir et blanc avec les arrêts serrés vers l’extrémité sombre : la majeure partie du cadre reste profonde et la lumière arrive tard.

## Dégradé monochrome ou schéma de couleurs monochromatique

Les deux termes sont liés et souvent confondus. Un [schéma de couleurs monochromatique](https://gradiently.design/fr/guide/monochromatic-color-scheme) est une palette : plusieurs teintes, tons et nuances d’une même couleur utilisés dans tout un design. Un dégradé monochrome est un seul fondu à l’intérieur de cette idée. Vous pouvez utiliser un dégradé monochrome dans un design dont la palette n’est pas du tout monochromatique, comme un fond bleu profond sous un texte orange.

| Aspect | Dégradé monochrome | Schéma monochromatique |
| --- | --- | --- |
| Ce que c’est | Un fondu continu | Un ensemble de couleurs distinctes |
| Où il vit | Un fond, une forme, un bouton | Toute une marque ou une mise en page |
| Nombre de teintes | Une | Une |
| Usage typique | Fonds d’en-tête, cartes, affiches | Interfaces, illustration, identité |

Même principe, échelle différente. Le dégradé est une surface ; le schéma est un système.

## Codes de dégradé monochrome à copier

Chacun garde une seule teinte et ne change que sa clarté et un peu sa saturation. Les arrêts plus sombres sont légèrement plus saturés que les plus clairs, ce qui est le comportement réel de la couleur dans l’ombre et explique l’aspect naturel de ces dégradés.

- Du noir au blanc: `linear-gradient(180deg, #000000 0%, #ffffff 100%)`
- Projecteur graphite: `radial-gradient(circle at 50% 30%, #3a3a3a 0%, #161616 50%, #050505 100%)`
- Du marine au ciel: `linear-gradient(160deg, #0a1a3f 0%, #1e40af 50%, #93c5fd 100%)`
- Du pin à la menthe: `linear-gradient(160deg, #052e1c 0%, #15803d 55%, #bbf7d0 100%)`
- Du sang de bœuf au blush: `linear-gradient(160deg, #2a0a12 0%, #9f1239 55%, #fecdd3 100%)`
- De l’aubergine au lilas: `linear-gradient(160deg, #1c0b33 0%, #6d28d9 55%, #ddd6fe 100%)`
- De la terre d’ombre au miel: `linear-gradient(160deg, #2b1a05 0%, #b45309 55%, #fde68a 100%)`
- Du papier à la pierre: `linear-gradient(180deg, #f7f5f2 0%, #d6d1ca 100%)`

Huit dégradés d’une seule couleur. Chacun reste dans sa propre teinte d’un bout à l’autre.

Pour l’extrémité sombre de cette famille à elle seule, voir les [dégradés noirs](https://gradiently.design/fr/guide/black-gradient) et les [dégradés gris](https://gradiently.design/fr/guide/grey-gradient). Pour comprendre le lien entre les paliers, les [teintes, tons et nuances](https://gradiently.design/fr/guide/tints-tones-shades) sont la lecture de fond.

## Comment faire un dégradé monochrome en CSS

Le moyen le plus simple de garder une teinte est d’écrire les arrêts en oklch et de ne changer que le premier nombre, la clarté. L’angle de teinte reste fixe : la couleur ne peut donc pas errer, et oklch espace la clarté uniformément : le dégradé monte à un rythme régulier. [OKLCH expliqué](https://gradiently.design/fr/guide/oklch-explained) couvre le format.

```css
.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}
```

Changez le nombre de teinte (264) pour déplacer tout le dégradé vers une autre couleur. La chroma baisse à l’extrémité claire, comme dans la vraie lumière.

1. **Choisissez la teinte** Choisissez une couleur et trouvez son angle de teinte. Un bleu se situe vers 260, un vert vers 145, un rouge vers 25.
2. **Fixez les arrêts le plus sombre et le plus clair** Gardez l’extrémité sombre au-dessus du noir pur et l’extrémité claire en dessous du blanc pur, sauf si vous voulez un bord net. Une clarté de 0,15 à 0,9 est une plage confortable.
3. **Placez l’arrêt du milieu avec intention** Déplacez-le vers l’extrémité que vous voulez voir dominer. Un arrêt central à 30 pour cent donne un cadre surtout clair ; à 70 pour cent, surtout sombre. Les [arrêts de couleur du dégradé](https://gradiently.design/fr/guide/gradient-stops) en montrent davantage.
4. **Ajoutez du grain** Une faible couche de bruit sur le dégradé masque le banding et ajoute un aspect matière.

## Pourquoi les dégradés monochromes sombres produisent du banding

La plupart des écrans affichent 256 niveaux par canal. Un dégradé du noir `#000000` au gris foncé `#282828` ne dispose que de 40 paliers distincts. Étirez-le sur un en-tête de 1920 pixels de large et chaque palier devient une bande de 48 pixels, que l’œil repère facilement dans le noir. Les dégradés multicolores le cachent parce que les canaux changent à des moments différents ; un dégradé monochrome change les trois ensemble : les bandes s’alignent donc.

### Bandes

- Du quasi noir au gris foncé sur tout l’écran
- Forte compression JPEG à l’export
- Surface numérique parfaitement propre
- Long dégradé à faible contraste avec peu d’arrêts

### Lisse

- Une plage de clarté plus large, ou une distance plus courte
- PNG, ou un réglage de haute qualité
- Une légère couche de grain par-dessus
- Une lumière radiale qui change plus vite près de son centre

Le [banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) et les [dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) détaillent la solution, avec du code pour une couche de bruit SVG.

## Où fonctionnent les dégradés monochromes

Comme ils ne portent qu’une couleur, les dégradés monochromes laissent la typographie et la photographie mener. Ils conviennent aux lancements de produits de luxe, aux cabinets d’architecture, aux sorties musicales et à toute marque dont l’identité est une seule couleur. Composez les mots dans l’extrémité la plus claire ou la plus foncée de la même teinte, ou en blanc ou noir, et le design se lit comme une seule décision assurée.

Si vous avez besoin d’un accent, prenez-le hors de la teinte et utilisez-le une seule fois : une date orange sur un dégradé marine, ou un prix rouge sur du graphite. Le dégradé reste monochrome, et l’accent reçoit toute l’attention parce que rien d’autre ne la lui dispute.

Une pochette d’album carrée dans des tons noir profond et anthracite avec un seul mot en typographie pâle

Une pochette de sortie carrée en 1080×1080, presque entièrement dans l’ombre, avec une lumière qui monte sur un bord.

Un large en-tête de site pour un cabinet d’architecture sur un dégradé sombre d’une seule couleur

Un en-tête de site en 1920×1080 : la même approche discrète d’une seule couleur sur un cadre beaucoup plus large.

Un fond monochrome dans Gradiently peut aussi bouger : un Mark rend sa lumière en direct, si bien qu’un dégradé d’une seule couleur peut dériver lentement derrière les mots, et avec Pro il s’exporte en boucle parfaite à chaque format que vous dessinez.

## FAQ

### Qu’est-ce qu’un dégradé monochrome ?

Un dégradé qui fond une seule teinte à travers ses propres nuances, du sombre au clair, ou qui va du noir au blanc par des gris.

### Un dégradé monochrome est-il la même chose qu’un schéma de couleurs monochromatique ?

Non. Un schéma monochromatique est une palette d’une seule teinte utilisée dans un design ; un dégradé monochrome est un fondu continu d’une seule teinte.

### Comment faire un dégradé d’une seule couleur en CSS ?

Écrivez les arrêts en oklch et ne changez que la clarté, par exemple de `oklch(0.18 0.08 264)` à `oklch(0.86 0.06 264)`. La teinte reste fixe : la couleur ne peut donc pas dériver.

### Pourquoi mon dégradé noir a-t-il des rayures ?

Les tons sombres ont très peu de paliers distincts sur un écran 8 bits : le dégradé montre donc des bandes. Ajoutez une légère couche de grain, élargissez la plage de clarté ou exportez en PNG.

### Quel est un code de dégradé noir et blanc ?

`linear-gradient(180deg, #000000 0%, #ffffff 100%)` est la version simple. Pour un rendu plus riche, serrez les arrêts vers l’extrémité sombre et arrêtez-vous avant le blanc pur.