# Dégradés noirs : créer avec du presque noir

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

Le noir pur est un trou dans l’écran. Les dégradés noirs qui font haut de gamme sont construits avec des presque noirs qui portent un peu de couleur, et une lumière qui se déplace.

## The short version

- Un dégradé noir est un fondu entre des tons presque noirs, ou du noir vers une couleur, qui donne de la profondeur aux designs sombres au lieu d’un vide plat.
- Les meilleurs dégradés noirs évitent le #000000 pur et utilisent des noirs teintés qui portent un peu de teinte, comme le noir bleuté, l’espresso chaud ou l’aubergine.
- Les dégradés sombres présentent facilement du banding car il y a peu de niveaux de luminosité entre des valeurs presque noires : ils demandent donc en général du grain ou une plage plus large.
- Le texte courant sur un dégradé noir se lit mieux en blanc cassé doux, et le texte gris secondaire exige encore un rapport de contraste d’au moins 4,5:1.
- Les dégradés noirs conviennent aux lancements, au luxe, à la musique, à la vie nocturne et aux produits en mode sombre, où le fond sombre fait rayonner une couleur d’accent.

Un **dégradé noir** est un fondu qui circule entre des tons presque noirs, ou du noir vers une couleur, pour qu’un design sombre ait de la profondeur et de la lumière au lieu d’un vide plat. Ceux qui font haut de gamme n’utilisent presque jamais le `#000000` pur. Ils partent d’un noir teinté, comme `#0b0b10`, ne font varier la luminosité que de quelques pour cent et ajoutent une seule source de couleur ou de lumière quelque part dans le champ.

Ce guide vous donne des noirs teintés, des codes de dégradés noirs à copier, le remède au banding qui accable les fondus sombres et des règles pour le texte. Pour les arrière-plans sombres en général, voyez les [arrière-plans dégradés sombres](https://gradiently.design/fr/guide/dark-gradient-backgrounds) ; pour les bases du fonctionnement des fondus, commencez par [ce qu’est un dégradé](https://gradiently.design/fr/guide/what-is-a-gradient).

## Pourquoi le noir pur paraît plat

Le `#000000` n’a pas de teinte et nulle part plus sombre où aller : un design construit dessus n’a pas d’ombres, seulement une absence. Rien dans la vraie vie n’est aussi noir : une pièce sombre, un ciel nocturne et un tissu noir portent tous une trace de couleur et une lente variation de luminosité. Votre œil lit cette variation comme de la profondeur.

- Noir pur : aucune profondeur: `linear-gradient(180deg, #000000 0%, #000000 100%)`
- Presque noir teinté : de la profondeur: `linear-gradient(180deg, #1a1a22 0%, #0b0b10 55%, #060609 100%)`

Côte à côte, la version teintée se lit comme une surface éclairée. Le noir pur se lit comme un trou.

Il y a aussi une raison pratique. Sur les écrans OLED, les pixels de noir pur s’éteignent complètement, et sur certains téléphones ils mettent un instant à se rallumer, ce qui peut laisser une brève traînée quand un contenu sombre défile. Remonter votre valeur la plus sombre de quelques crans au-dessus de zéro l’évite et ne coûte rien visuellement.

## Noirs teintés : les couleurs à l’intérieur d’un bon noir

Un noir teinté est une couleur très sombre qui garde un peu de saturation. En HSL, gardez la luminosité entre 4 % et 9 % environ et laissez la saturation entre 15 % et 40 %. La teinte décide de l’ambiance : les noirs bleutés paraissent techniques et froids, les bruns chauds évoquent le cuir et le café, et l’aubergine évoque le soir.

- Encre: #0b0b10
- Noir marine: #0a0e17
- Noir forêt: #0b120f
- Noir aubergine: #120b14
- Espresso: #14100d
- Graphite: #161618

Six noirs teintés. Isolés, ils paraissent presque identiques ; côte à côte et à côté de la couleur, leurs températures apparaissent.

Si vous travaillez en OKLCH, les chiffres sont plus faciles à raisonner : une luminosité d’environ 15 % à 20 % et une chroma entre 0,005 et 0,025. L’encre ci-dessus est `oklch(15.2% 0.011 285)`, un noir avec un souffle de bleu. Notre guide sur les [codes couleur](https://gradiently.design/fr/guide/color-codes-explained) explique comment lire ces valeurs.

## Des codes de dégradés noirs à copier

Chacun garde sa valeur la plus sombre au-dessus du noir pur et fait varier la luminosité en douceur. Utilisez-les comme arrière-plans complets, bandeaux ou fonds de diapositives, et choisissez celui dont la température s’accorde avec votre couleur d’accent.

- Chute d’encre: `linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%)`
- Projecteur noir bleuté: `radial-gradient(120% 80% at 50% 0%, #1b2233 0%, #0a0e17 60%, #050608 100%)`
- Espresso chaud: `linear-gradient(180deg, #221b16 0%, #14100d 55%, #0a0806 100%)`
- Éclat graphite: `linear-gradient(135deg, #0e0e10 0%, #2a2a2e 50%, #0e0e10 100%)`
- Du noir au violet: `linear-gradient(160deg, #050507 0%, #12101c 55%, #2a1b4a 100%)`
- Du noir à la braise: `linear-gradient(200deg, #0a0706 0%, #1d0d08 50%, #5a1a0c 100%)`
- Noir et or: `linear-gradient(135deg, #0b0906 0%, #1c160c 60%, #6b5320 100%)`
- Turquoise de minuit: `linear-gradient(180deg, #03080a 0%, #08171b 55%, #0f3036 100%)`

Huit dégradés noirs, tous à copier. Les quatre premiers restent proches du neutre ; les quatre derniers laissent une couleur émerger de l’obscurité.

La direction compte plus sur du noir que partout ailleurs, car il s’y passe si peu de choses. Une lumière qui tombe du haut paraît naturelle et calme. Une lumière qui monte d’un coin du bas se lit comme une lueur, celle d’un écran ou d’une flamme, et attire l’œil vers ce coin. Pour en savoir plus, voyez les [angles de dégradé](https://gradiently.design/fr/guide/gradient-angle).

## Dégradés du noir vers une couleur

Les dégradés noirs les plus frappants laissent une couleur émerger de l’obscurité. Deux règles les gardent riches. D’abord, ne donnez pas à la couleur plus d’un tiers du champ, pour que le noir reste la note principale. Ensuite, assombrissez la couleur vers le noir le long de sa propre teinte au lieu de la faire passer par le gris : un violet doit traverser un indigo profond en descendant, pas un anthracite. Un milieu gris est la cause la plus courante des [dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients).

Lueur violette sortant du noir: `radial-gradient(90% 70% at 80% 100%, #7c3aed 0%, #3b1d6e 30%, #140d24 60%, #08070c 100%)`

Le violet passe par l’améthyste profond et la prune en allant vers le noir : la décroissance reste donc colorée au lieu d’être grise.

Les navigateurs modernes peuvent en faire une partie pour vous. Interpoler en OKLCH garde la chroma de la couleur vivante dans les points plus sombres, et une ligne de repli simple couvre les navigateurs plus anciens.

```css
.hero {
  /* Fallback for browsers without colour interpolation */
  background: linear-gradient(160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
  /* Blends through oklch, so the violet stays violet as it darkens */
  background: linear-gradient(in oklch 160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
}
```

La seconde déclaration l’emporte là où `in oklch` est pris en charge et est ignorée ailleurs.

## Comment éviter le banding dans les dégradés sombres

Les écrans affichent en général 256 niveaux par canal de couleur. Un dégradé de `#0a0a0a` à `#1a1a1a` ne dispose que de 16 de ces niveaux : sur un bandeau de 1920 pixels de large, chaque marche fait environ 120 pixels et l’on voit des rayures. C’est le [banding des dégradés](https://gradiently.design/fr/guide/gradient-banding), dont les dégradés sombres souffrent le plus.

### Provoque du banding

- Une plage de luminosité longue et très étroite, comme #0a0a0a à #1a1a1a
- Des gris parfaitement neutres, où les trois canaux montent au même endroit
- Exporter un dégradé sombre en JPEG compressé
- Étirer une petite image de dégradé sur un grand écran

### Le corrige

- Une légère couche de grain ou de bruit sur le dégradé
- Une légère teinte, pour que les canaux rouge, vert et bleu montent à des endroits différents
- Exporter en taille réelle en PNG, ou rendre le dégradé en direct en CSS
- Une plage de luminosité plus large, ou une distance plus courte pour le fondu

Le grain est le remède le plus fiable, car il brise le bord net de chaque marche en une texture que l’œil refond. Quelques pour cent d’opacité suffisent. Les [dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) détaillent l’effet ; voici le CSS minimal.

```css
.hero {
  position: relative;
  background: linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Une couche de bruit SVG à 8 % d’opacité masque les marches d’un dégradé sombre sans faire sale.

## Texte et couleur sur un dégradé noir

Un fond noir fait passer le contraste à presque n’importe quel texte clair : le risque se déplace donc vers votre texte secondaire. Des gris moyens qui paraissent corrects sur un écran lumineux peuvent tomber sous le minimum de 4,5:1 pour le texte courant. Le blanc pur a aussi un coût : certains lecteurs trouvent le blanc vif sur du presque noir agressif sur de longs passages ; un blanc cassé chaud est donc plus doux et se lit toujours nettement. Voyez le [contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility) pour les règles complètes.

| Couleur du texte | Contraste sur #0b0b10 | À utiliser pour |
| --- | --- | --- |
| `#ffffff` blanc | 19,6:1 | Titres courts |
| `#f2efe9` blanc cassé chaud | 17,1:1 | Titres et texte courant |
| `#a1a1aa` gris clair | 7,7:1 | Texte secondaire |
| `#8a8a93` gris moyen | 5,7:1 | Légendes et étiquettes |
| `#6b6b75` gris sourd | 3,7:1 | Grand texte seulement, 24 px et plus |
| `#4a4a52` anthracite | 2,2:1 | Décoration, jamais des mots |

Rapports de contraste calculés avec la formule WCAG par rapport au noir Encre. Tout ce qui est sous 4,5:1 est trop pâle pour du texte courant.

Un post en portrait avec les mots « Après la nuit tombée » en blanc cassé sur un dégradé presque noir profond, doucement éclairé

Un champ presque noir, une ligne blanc cassé chaud et un seul accent : la mise en page classique d’un dégradé noir.

## Où les dégradés noirs marchent le mieux

- **Lancements et révélations**, où un fond sombre donne l’impression qu’un produit ou un titre est éclairé
- **Luxe, parfum et bijouterie**, associés à un accent métallique comme `#c9a96e`
- **Musique, vie nocturne et événements**, avec une couleur saturée qui monte d’un coin
- **Produits tech et pour développeurs**, où les noirs bleutés paraissent précis
- **Interfaces en mode sombre**, avec deux ou trois noirs teintés comme couches de surface
- **Portfolios photo**, où un cadre noir discret laisse les images porter la couleur

Dans Gradiently, le Marché vous permet de chercher des Marks avec des mots de couleur comme « presque noir » ou « noir et or », et chaque Mark porte déjà grain et lumière : les problèmes de banding et de platitude ci-dessus sont réglés avant de commencer.

## FAQ

### Quel est le meilleur code hex pour un dégradé noir ?

Partez d’un presque noir teinté comme `#0b0b10` (noir bleuté) ou `#14100d` (espresso chaud) plutôt que de `#000000`, et laissez le point le plus clair quelques crans plus haut, comme `#1c1c24`.

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

Les valeurs presque noires ont très peu de niveaux de luminosité entre elles : chaque marche devient une bande visible. Ajoutez une légère couche de grain, donnez une légère teinte aux noirs ou élargissez la plage de luminosité.

### Quelle couleur de texte convient le mieux sur un dégradé noir ?

Un blanc cassé chaud comme `#f2efe9` se lit nettement et paraît plus doux que le blanc pur. Gardez le texte gris secondaire à un contraste de 4,5:1 ou plus.

### Comment faire un dégradé du noir vers une couleur qui ne soit pas boueux ?

Assombrissez la couleur le long de sa propre teinte en allant vers le noir, par exemple le violet par un indigo profond, au lieu de la faire passer par le gris. Interpoler en OKLCH en CSS aide.

### Un dégradé noir convient-il au mode sombre ?

Oui, s’il est subtil. Les surfaces du mode sombre marchent mieux avec deux ou trois noirs teintés à quelques pour cent d’écart, et un dégradé visible limité aux grandes zones d’arrière-plan.