L’essentiel en bref
- 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.
Sur cette page
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.
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.
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.
Jeu vidéo
Diagonales nettes et coupures franches, plus proches d’un graphisme que d’un halo. Elles paraissent rapides et agressives.
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.
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.
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 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 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 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.
#0a0a0aTexte
#fef2f2Contraste
Verdict
#0a0a0aTexte
#ef4444Contraste
Verdict
#ef4444Texte
Contraste
Verdict
#dc2626Texte
Contraste
Verdict
#b91c1cTexte
Contraste
Verdict
#7f1d1dTexte
Contraste
Verdict
Une publication de salle de boxe avec du rouge qui monte du sol et un texte blanc os au-dessus.
Une story de cinéma éclairée par une seule lumière rouge latérale.
CSS du dégradé rouge et noir
.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%);
}Pour d’autres rouges profonds, voir les dégradés rouges et les dégradés bordeaux. 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.
Les questions qu’on nous pose
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é.
É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