L’essentiel en bref
- Un riche arrière-plan dégradé sombre part d’un quasi-noir teinté plutôt que d’un noir pur, puis ajoute une couleur éclairée qui en émerge.
- Les dégradés sombres paraissent tristes quand ils n’ont ni source de lumière, ni couleur dans les noirs, ni contraste entre zones sombres et éclairées.
- Les dégradés sombres font plus de banding que tous les autres : ils demandent presque toujours un grain fin et un export soigné.
- Un texte clair sur un dégradé sombre doit se placer dans la zone la plus sombre et respecter au moins 4,5:1 de contraste pour le texte courant.
- Une typo blanc cassé et des noirs légèrement relevés fatiguent moins les yeux que du blanc pur sur du noir pur.
Sur cette page
Un bon arrière-plan dégradé sombre est un quasi-noir teinté d’où rayonne une couleur, comme si une seule lampe était allumée dans une pièce sombre. La teinte donne de la profondeur aux noirs, la couleur éclairée donne à l’œil un endroit où aller, et la grande zone sombre fait ressortir une typo blanche. Sans ces trois éléments, un dégradé sombre ressemble juste à un écran tamisé.
Partez d’un quasi-noir teinté
Le noir pur #000000 est une impasse : il n’y a rien à mélanger, et toute couleur à côté paraît collée. Un quasi-noir avec une pointe de teinte donne au dégradé une famille à laquelle appartenir. Les noirs bleutés paraissent froids et techniques, les noirs violacés luxueux, les noirs verdâtres naturels et les bruns chauds évoquent le cuir et le bois. Choisissez la teinte qui va avec la couleur que vous comptez éclairer.
Ajoutez une couleur éclairée
La couleur éclairée transforme l’obscurité en atmosphère. Placez-la hors du centre, en général près d’un bord ou d’un coin, pour qu’elle se lise comme une source de lumière. Gardez-la dans la même famille que la teinte : lumière violette sur noir violacé, sarcelle sur noir bleuté. Une couleur suffit presque toujours. Deux peuvent marcher si elles sont voisines. Au-delà, cela commence à ressembler à une boîte de nuit, ce qui convient si c’est ce que vous concevez ; voyez les dégradés néon.
Pourquoi certains dégradés sombres paraissent tristes
Triste
- Du noir pur qui se fond dans un gris foncé
- Une lumière étalée uniformément, sans source
- La couleur éclairée ternie vers le gris
- Des rayures visibles sur la rampe sombre
- Du texte gris sur un fond gris-noir
Riche
- Un quasi-noir teinté à la teinte claire
- Une lumière, hors du centre, qui s’estompe
- La couleur éclairée gardée saturée à son point le plus lumineux
- Un grain fin sur toute la surface
- Du texte blanc cassé dans la zone la plus sombre
L’erreur la plus courante est de mélanger la couleur éclairée vers le gris en chemin vers le noir. Gardez la chroma en assombrissant : le violet doit devenir un violet plus profond, puis un noir violacé, jamais gris. Mélanger en OKLCH aide ; les dégradés boueux expliquent pourquoi.
Le banding : le plus grand risque des dégradés sombres
Les dégradés sombres ne couvrent qu’une petite plage de valeurs, souvent une douzaine ou deux par canal, et l’on est très sensible aux petits paliers entre tons sombres. Une rampe sombre lisse sur tout un écran est donc la recette parfaite pour des rayures visibles. Trois habitudes l’évitent : donner assez de plage à la rampe, ajouter un grain fin et exporter sans forte compression. Le détail est dans le banding des dégradés et les dégradés granuleux.
Du texte sur un dégradé sombre
Les fonds sombres sont généreux avec la typographie, mais seulement dans les zones sombres. Éloignez les mots de la couleur éclairée, où le contraste chute. Utilisez du blanc cassé plutôt que du blanc pur pour les longs passages, car le blanc pur sur quasi-noir peut éblouir. Et mesurez : les WCAG demandent au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte, ce que vous vérifiez avec le vérificateur de contraste WebAIM.
| Couleur du texte | Sur `#0b0f1a` | À utiliser pour |
|---|---|---|
#ffffff blanc | Environ 19:1 | Titres et courts libellés |
#e5e7eb blanc cassé | Environ 15:1, plus doux | Texte courant et lecture longue |
#9ca3af gris moyen | Environ 7,5:1, passe AA | Légendes et texte secondaire |
#4b5563 gris foncé | Environ 2,5:1, échoue | À éviter pour tout ce que l’on doit lire |
La lumière passe juste derrière le titre et l’écrase.
Avec le fond sombre derrière le titre, la lumière l’encadre au lieu de l’écraser.
Où les arrière-plans dégradés sombres marchent le mieux
Les dégradés sombres conviennent à tout ce qui se passe la nuit, paraît haut de gamme ou demande à la couleur de rayonner : musique et événements, cinéma et jeux, lancements technologiques, parfums et spiritueux, et portfolios où le travail doit être la chose la plus lumineuse de la page. Ils aident aussi la photo de produit, car un objet éclairé sur fond sombre paraît précieux.
- Pochettes et affiches : un fond sombre fait d’un seul titre lumineux le héros
- Stories et Reels : des cadres sombres plein écran font cinéma sur un téléphone
- Diapositives : un texte clair sur fond sombre est plus calme dans une pièce tamisée qu’un texte sombre sur blanc
- Heros de sites web : un hero sombre donne au premier écran un air voulu ; voyez les arrière-plans de hero de site web
Ils conviennent moins quand on lit longtemps sur papier, ou quand une marque repose sur la lumière du jour, la fraîcheur ou le jeu. Là, un fond pâle avec une couleur douce fait le même travail.
Un arrière-plan dégradé sombre en CSS
.dark-hero {
background-color: #0b0f1a; /* fallback */
background-image:
radial-gradient(circle at 85% 15%, #1d4ed8 0%, transparent 45%),
linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
color: #e5e7eb;
}
.dark-hero h1 {
color: #ffffff;
}Si vous concevez toute une interface en mode sombre plutôt qu’un seul arrière-plan, voyez le design du mode sombre. Beaucoup de Marks du Marché reposent sur des fonds sombres, et ils font de la place à vos mots automatiquement en plaçant leur zone la plus calme derrière le texte.
Les questions qu’on nous pose
Comment réussir un arrière-plan dégradé sombre ?
Utilisez un quasi-noir teinté plutôt que du noir pur, ajoutez une couleur éclairée hors du centre de la même famille, et finissez par un grain fin.
Pourquoi mon dégradé sombre a-t-il des rayures ?
Les mélanges sombres couvrent très peu de valeurs de couleur : les paliers sont donc larges et faciles à voir. Ajoutez du grain, élargissez la plage et exportez en haute qualité.
Quelle couleur de texte sur un dégradé sombre ?
Du blanc pour les titres et du blanc cassé comme #e5e7eb pour le texte courant, placés dans la zone la plus sombre. Vérifiez au moins 4,5:1 de contraste pour le texte courant.
Faut-il utiliser du noir pur dans un dégradé ?
Rarement. Un quasi-noir à la teinte légère se mélange plus naturellement et donne de la profondeur au dégradé.
Quelles couleurs vont avec un dégradé noir ?
Le violet profond, la sarcelle, le bleu, l’orange braise et le rose fonctionnent tous comme couleur éclairée unique sur un fond quasi noir de la même famille de teinte.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
