# Dégradés rouge et noir : codes dramatiques sans banding [Canonical HTML page](https://gradiently.design/fr/guide/red-black-gradient) Le rouge sur noir est l’accord le plus dramatique de la couleur. Il peut évoquer un hall de cinéma, un combat de boxe ou une affiche d’horreur. Ces codes donnent le drame et gardent le contrôle. ## The short version - Un dégradé rouge et noir fait passer un rouge comme #dc2626 ou #b91c1c vers un quasi noir, généralement par un rouge sang profond comme #450a0a. - Fondre le rouge en passant par un cramoisi sombre plutôt que directement vers le noir garde la transition riche et évite une bande brune ou grise. - Les dégradés rouge et noir montrent beaucoup de banding dans les images et vidéos compressées : ajoutez du grain et évitez les grandes zones lisses à faible contraste. - Le texte blanc se lit bien sur le rouge profond et le noir, tandis que les rouges moyens saturés demandent une typographie grande et grasse pour que le blanc fonctionne. - Ce duo convient au cinéma, au sport, au jeu vidéo, à la mode, à la vie nocturne et à Halloween, et fonctionne mieux avec une seule source de lumière forte qu’avec du rouge réparti uniformément. Un **dégradé rouge et noir** fait passer un rouge vif comme `#dc2626` ou un cramoisi plus profond comme `#b91c1c` vers un quasi noir, idéalement par un rouge sang comme `#450a0a` pour que la transition reste riche. Peu d’accords sont aussi dramatiques : le rouge attire l’attention et le noir ne lui oppose rien. Voici des codes rouge et noir pour cinq sortes de drame, comment les empêcher de produire du banding, et les couleurs de texte qui fonctionnent. ## Comment fondre le rouge dans le noir sans brun L’erreur courante est de fondre un rouge pur directement dans un noir pur en deux arrêts. Le milieu de ce dégradé est un rouge brun trouble qui paraît sale plutôt que sombre. Passez plutôt par des rouges de plus en plus foncés, et utilisez un noir avec une trace de rouge, pour que l’ombre appartienne à la même famille que la lumière. - Blanc os: #fef2f2 - Rouge de signalisation: #f87171 - Écarlate: #ef4444 - Rouge: #dc2626 - Cramoisi: #b91c1c - Oxyde: #7f1d1d - Sang: #450a0a - Noir: #0a0a0a Une rampe du rouge au noir, avec un blanc os pour le texte. Utilisez trois ou quatre nuances voisines dans un même dégradé. - Deux arrêts : milieu boueux: `linear-gradient(180deg, #dc2626 0%, #000000 100%)` - Par paliers : riche jusqu’au bout: `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)` Le même rouge et la même obscurité. La version par paliers passe par le cramoisi et le rouge sang au lieu du brun. ## Codes de dégradé rouge et noir pour cinq sortes de drame ### Cinéma et thriller Surtout du noir, avec le rouge qui arrive comme une seule lumière venue du côté, comme un panneau de sortie dans une pièce sombre. Calme et tendu. - Lumière latérale: `radial-gradient(circle at 90% 50%, #b91c1c 0%, #450a0a 25%, #0a0505 60%)` - Bord rouge: `linear-gradient(90deg, #000000 0%, #0a0505 55%, #7f1d1d 85%, #dc2626 100%)` ### Sport et soirée de combat Un rouge brûlant qui monte du bas, comme si le sol de l’arène était éclairé. Fort, physique et pressant. - Sol d’arène: `radial-gradient(ellipse at 50% 110%, #ef4444 0%, #991b1b 30%, #1c0505 65%, #000000 90%)` - Chaleur montante: `linear-gradient(0deg, #dc2626 0%, #7f1d1d 30%, #0a0a0a 75%)` ### Jeu vidéo Diagonales nettes et coupures franches, plus proches d’un graphisme que d’un halo. Elles paraissent rapides et agressives. - Coupure nette: `linear-gradient(120deg, #0a0a0a 0%, #0a0a0a 55%, #dc2626 55%, #7f1d1d 100%)` - Motif de lignes de balayage: `repeating-linear-gradient(180deg, #0a0a0a 0px, #0a0a0a 14px, #450a0a 14px, #450a0a 16px)` ### Mode et luxe Cramoisi profond et noir laqué, avec presque aucun rouge vif. Pensez à une boîte laquée ou à une doublure de soie rouge : polie, chère et maîtrisée. - Laque: `linear-gradient(160deg, #0a0a0a 0%, #2a0606 50%, #7f1d1d 100%)` - Velours cramoisi: `radial-gradient(circle at 30% 20%, #991b1b 0%, #3b0707 35%, #0a0a0a 75%)` ### Halloween et horreur Un rouge qui stagne au bas du cadre ou s’infiltre depuis les coins. Utilisé avec parcimonie, il est vraiment troublant ; en excès, on dirait un magasin de déguisements. - Flaque: `radial-gradient(ellipse at 50% 100%, #7f1d1d 0%, #2a0505 40%, #050202 80%)` - Vignette rouge: `radial-gradient(circle at 50% 50%, #0a0a0a 40%, #450a0a 75%, #991b1b 100%)` Dix codes pour cinq ambiances. Dans chacune, le rouge occupe une zone et le noir tient le reste. Les [graphismes d’Halloween](https://gradiently.design/fr/guide/halloween-graphics) offrent d’autres idées de saison. ## Pourquoi les dégradés rouge et noir produisent du banding, et comment l’empêcher Les dégradés sombres et lisses disposent de très peu de nuances distinctes : ils se brisent donc en paliers visibles, surtout après qu’une application les a recompressés. Le rouge saturé aggrave les choses en vidéo, car la plupart des formats vidéo stockent la couleur à une résolution inférieure à la luminosité, et les bords rouges bavent. Le [banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) en explique la mécanique. 1. **Ajoutez un grain fin** Une légère couche de bruit casse les paliers. Les [dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) donnent une recette prête à l’emploi. 2. **Exportez à la taille réelle** Importez à la taille propre à la plateforme, comme 1080×1350 pour une publication Instagram, pour ne pas être redimensionné et compressé deux fois. 3. **Préférez le PNG pour les images fixes** Le PNG évite les artefacts en blocs que le JPEG crée dans les zones sombres et lisses. 4. **Gardez de la texture en vidéo** Un fondu rouge parfaitement lisse est ce qu’il y a de plus difficile pour un encodeur vidéo. Un peu de mouvement ou de grain survit bien mieux. ## Quelle quantité de rouge avec du noir Le rouge porte de fortes associations : danger, chaleur, passion, urgence, et en de nombreux endroits chance et fête. À côté du noir, ces sens s’amplifient : la proportion décide donc si un design paraît dramatique ou alarmant. La [signification de la couleur rouge](https://gradiently.design/fr/guide/red-color-meaning) approfondit les associations. ### Alarmant - Du rouge réparti uniformément sur tout le cadre - Du rouge vif derrière un petit texte blanc - Rouge, noir et une troisième couleur criarde - Un halo rouge sur chaque mot ### Dramatique - Le noir qui tient la majeure partie du cadre, le rouge dans une zone - Un cramoisi profond derrière le texte, le rouge vif tenu à distance - Rouge, noir et un blanc os discret - Une typographie simple, la lumière qui fait le travail ## Couleurs de texte sur rouge et noir Du côté noir, presque tout ce qui est clair se lit. Du côté rouge, cela dépend de la profondeur du rouge. L’écarlate vif est plus clair qu’on ne le pense : le texte blanc y doit donc être grand et gras. Les rapports utilisent la formule WCAG, où 4,5:1 est la cible pour le petit texte. | Fond | Texte | Contraste | Verdict | | --- | --- | --- | --- | | Noir `#0a0a0a` | Blanc os `#fef2f2` | 18,1:1 | Excellent | | Noir `#0a0a0a` | Écarlate `#ef4444` | 5,3:1 | Bon pour des titres en rouge | | Écarlate `#ef4444` | Blanc | 3,8:1 | Typographie grande et grasse seulement | | Rouge `#dc2626` | Blanc | 4,8:1 | Bon | | Cramoisi `#b91c1c` | Blanc | 6,5:1 | Bon | | Oxyde `#7f1d1d` | Blanc | 10,0:1 | Excellent | Le texte rouge sur noir est lisible, mais réservez-le aux titres ; les longs passages en rouge saturé fatiguent à lire. Une affiche verticale de soirée de combat avec un lettrage blanc sur noir, avec une lumière rouge qui monte du bas du cadre Une publication de salle de boxe avec du rouge qui monte du sol et un texte blanc os au-dessus. Une story verticale de cinéma avec un lettrage pâle sur noir, éclairée d’un côté par une lueur rouge profond Une story de cinéma éclairée par une seule lumière rouge latérale. ## CSS du dégradé rouge et noir ```css .drama { background-color: #0a0505; background-image: radial-gradient(ellipse at 50% 110%, #dc2626 0%, transparent 45%), linear-gradient(180deg, #0a0a0a 0%, #2a0606 70%, #450a0a 100%); color: #fef2f2; } .split { background: linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%); } ``` Une section sombre éclairée de rouge par le bas, et une coupure diagonale nette. Deux arrêts à la même position font un bord net. Pour d’autres rouges profonds, voir les [dégradés rouges](https://gradiently.design/fr/guide/red-gradient) et les [dégradés bordeaux](https://gradiently.design/fr/guide/maroon-gradient). Si le rouge et noir est central pour votre marque, réservez un Mark de Gradiently et personne d’autre ne pourra l’exporter. Il se rend à toutes les tailles, d’une story à une bannière de stream, et place automatiquement sa zone sombre la plus calme derrière vos mots. ## FAQ ### Quel est un bon code de dégradé rouge et noir ? Un code riche est `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`. Il passe par le cramoisi et le rouge sang au lieu de virer au brun. ### Pourquoi mon dégradé rouge vers noir paraît-il brun ? Un dégradé à deux arrêts du rouge pur au noir pur passe par un rouge brun trouble. Ajoutez des arrêts cramoisi et rouge sang, et utilisez un noir avec une trace de rouge. ### Quelle couleur de texte sur un dégradé rouge et noir ? Le blanc ou un blanc os chaud se lit bien sur le noir et sur les rouges profonds. Sur l’écarlate vif, n’utilisez le blanc qu’en typographie grande et grasse. ### Comment faire un fond rouge et noir à coupure nette en CSS ? Placez deux arrêts à la même position : `linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%)` crée un bord diagonal net. ### Comment éviter le banding dans un dégradé rouge foncé ? Ajoutez un grain fin, exportez à la taille propre à la plateforme et utilisez le PNG pour les images fixes. Les fondus rouges sombres et lisses montrent plus de banding que presque tout autre dégradé.