# Fonds dégradés sombres : de la profondeur sans grisaille [Canonical HTML page](https://gradiently.design/fr/guide/dark-gradient-backgrounds) Un dégradé sombre peut ressembler à une scène nocturne haut de gamme ou à un écran boueux dont on a baissé la luminosité. La différence tient à une poignée de décisions, toutes faciles à copier. ## The short version - 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. 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. - Noir bleuté: #0b0f1a - Noir violacé: #120b1a - Noir verdâtre: #0a1411 - Noir terre d’ombre: #160c0a - Noir neutre: #0f0f10 Cinq quasi-noirs. Côte à côte, les teintes sont évidentes ; seuls, ils se lisent comme un noir avec une ambiance. ## 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](https://gradiently.design/fr/guide/neon-gradients). - Lampe violette: `radial-gradient(circle at 80% 20%, #6d28d9 0%, #2e1065 30%, #0c0a1d 70%)` - Horizon sarcelle: `linear-gradient(180deg, #030712 0%, #042f2e 65%, #0f766e 100%)` - Lueur de braise: `radial-gradient(ellipse at 50% 110%, #ea580c 0%, #7c2d12 30%, #1c0a05 65%, #0c0605 100%)` - Heure bleue: `linear-gradient(160deg, #020617 0%, #0f172a 45%, #1e3a8a 100%)` - Fumée rose: `radial-gradient(circle at 20% 80%, #be185d 0%, #4a044e 35%, #0f0710 75%)` - Nuit de mousse: `linear-gradient(135deg, #050a07 0%, #0f2419 55%, #166534 100%)` Six dégradés sombres, chacun un quasi-noir teinté avec une couleur éclairée. L’essentiel de chaque pastille reste sombre. ## 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](https://gradiently.design/fr/guide/muddy-gradients) 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](https://gradiently.design/fr/guide/gradient-banding) et les [dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients). > **Vérifiez sur un téléphone** Un banding invisible sur un écran calibré peut être flagrant sur un téléphone à pleine luminosité, après qu’une plateforme sociale a recompressé l’image. Contrôlez toujours la version mise en ligne. ## 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](https://webaim.org/resources/contrastchecker/). | 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 | Couleurs de texte sur un fond noir bleuté. Vérifiez toujours le contraste au point le plus clair derrière les mots, pas le plus sombre. Une pochette carrée intitulée Après minuit où un halo vif se place derrière les mots La lumière passe juste derrière le titre et l’écrase. La même pochette carrée avec la partie la plus sombre du dégradé derrière le titre 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](https://gradiently.design/fr/guide/website-hero-background) 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 ```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; } ``` Un fond noir bleuté avec une lumière bleue en haut à droite, du texte courant blanc cassé et des titres blancs. Ajoutez une couche de grain pour finir. Si vous concevez toute une interface en mode sombre plutôt qu’un seul arrière-plan, voyez le [design du mode sombre](https://gradiently.design/fr/guide/dark-mode-design). 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. ## FAQ ### 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.