# Dégradé rouge : de l’énergie sans l’alerte

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

Le rouge attire l’attention plus vite que n’importe quelle couleur, et c’est justement pour ça qu’il dérape. Comment composer des dégradés rouges vivants, chaleureux et sûrs d’eux, pas criards.

## The short version

- Un dégradé rouge est un fondu construit autour de tons rouges comme le cramoisi, l’écarlate, le sang-de-bœuf ou le corail, pour des créations qui demandent chaleur et urgence.
- Les dégradés rouges sont les plus beaux quand un seul point est pleinement saturé et que les autres vont vers un vin plus profond ou un orange et un rose plus chauds.
- Un `#ff0000` pur avec du texte blanc offre un rapport de contraste de 4:1, sous le minimum de 4.5:1 exigé pour le texte courant.
- Garder le rouge près de ses voisins chauds, plutôt que d’un bleu saturé, évite le scintillement et l’effet d’alerte qui rendent les créations rouges agressives.
- Les rouges profonds comme le sang-de-bœuf et le vin paraissent haut de gamme et calmes, tandis que l’écarlate vif et le corail paraissent énergiques et ludiques.

Un **dégradé rouge** est un fondu construit autour du rouge, de l’écarlate vif et du cramoisi au sang-de-bœuf profond et au corail doux, et c’est le dégradé le plus énergique que l’on puisse mettre à l’écran. Le secret pour bien l’utiliser, c’est la retenue : laissez un seul point porter la pleine saturation, dirigez le reste vers un vin plus profond ou un orange et un rose plus chauds, et tenez le rouge à distance des endroits où l’on attend des avertissements. Ainsi, le rouge évoque la chaleur et l’appétit plutôt qu’un message d’erreur.

Vous trouverez ci-dessous trois palettes de rouge, neuf codes de dégradés rouges à copier, les valeurs de contraste du texte sur rouge et les usages où le rouge fonctionne le mieux. Pour comprendre comment les couleurs portent du sens, voir la [psychologie des couleurs](https://gradiently.design/fr/guide/color-psychology).

## Pourquoi le rouge est plus difficile à travailler qu’il n’y paraît

Le rouge est fort pour plusieurs raisons à la fois. Le rouge d’écran atteint une saturation très élevée, donc il domine tout ce qui l’entoure. Les interfaces ont appris aux gens à y lire un danger : états d’erreur, boutons de suppression, batterie faible et pastilles de notification sont presque toujours rouges. Et un rouge vif posé juste à côté d’un bleu saturé peut sembler vibrer ou se placer à une autre profondeur, un effet appelé chromostéréopsie, qui rend le texte de ce duo fatigant à lire.

### Se lit comme une alerte

- Un `#ff0000` uni remplissant tout le canevas
- Texte ou bordures rouges sur une page blanche sans autre couleur chaude
- Rouge posé directement contre un bleu saturé
- Rouge utilisé à la fois pour la marque et pour les messages d’erreur

### Se lit comme de l’énergie

- Un point de rouge vif qui plonge dans un vin profond ou un sang-de-bœuf
- Rouge fondu avec ses voisins chauds, l’orange et le rose
- Rouge sur fond sombre et chaud, avec un blanc cassé doux pour le texte
- Une couleur distincte, bien différente, réservée aux erreurs

## Trois palettes de rouge : cramoisi, sang-de-bœuf et corail

La plupart des dégradés rouges réussis viennent de l’une de trois familles. Le cramoisi penche légèrement vers le bleu et paraît audacieux et classique. Le sang-de-bœuf et le vin sont des rouges profonds et sombres qui évoquent le cuir, le velours et le vin rouge. Le corail est un rouge éclairci vers l’orange et le rose, plus doux et plus amical. Choisissez une famille avant de choisir un dégradé, car mélanger les trois dans un même fondu donne en général un résultat boueux.

- Cramoisi: #e11d48
- Cramoisi profond: #b91c1c
- Sang-de-bœuf: #7f1d1d
- Vin: #4a0e0e
- Corail: #ff6f61
- Rose pâle: #fecaca

Cramoisi en haut, sang-de-bœuf et vin pour la profondeur, corail et rose pâle pour la légèreté. Chaque famille compose son propre type de dégradé rouge.

## Codes de dégradés rouges à copier

Ces dégradés gardent tous le rouge comme note principale, mais diffèrent par la température et la profondeur. Les plus sombres fonctionnent comme arrière-plans complets ; les plus vifs conviennent mieux aux boutons, pastilles, cartes et brefs éclats d’attention.

- Feu cramoisi: `linear-gradient(135deg, #7f1d1d 0%, #dc2626 55%, #f97316 100%)`
- Sang-de-bœuf: `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`
- Du corail au cramoisi: `linear-gradient(135deg, #ff6f61 0%, #e11d48 100%)`
- Lueur de cerise: `radial-gradient(80% 80% at 30% 20%, #ef4444 0%, #991b1b 55%, #3b0a0a 100%)`
- Du rouge au rose: `linear-gradient(135deg, #dc2626 0%, #ec4899 100%)`
- De l’écarlate au vin: `linear-gradient(90deg, #ff3b30 0%, #b91c1c 50%, #5b0f1f 100%)`
- Terre cuite: `linear-gradient(180deg, #c2410c 0%, #9a3412 50%, #6b1f0e 100%)`
- Rose pâle doux: `linear-gradient(135deg, #fee2e2 0%, #fca5a5 50%, #f87171 100%)`
- Du rouge au noir: `linear-gradient(180deg, #b91c1c 0%, #450a0a 70%, #120404 100%)`

Neuf dégradés rouges, du vif au profond. Chacun ne passe que par des voisins chauds ou des rouges plus profonds, jamais par du gris.

Remarquez ce que ces codes ont en commun. Le point vif se trouve à une extrémité ou en un seul endroit, jamais sur tout le champ. Les points sombres sont des *rouges* sombres, pas du noir ni du gris, si bien que le fondu garde sa couleur en descendant. Si un dégradé rouge tourne au brun au milieu, vous l’avez probablement fondu vers un vert ou un gris ; notre guide sur les [dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) explique pourquoi.

## Comment maîtriser l’intensité du rouge

1. **Choisissez un seul point vif** Décidez où vit le rouge le plus saturé, en général près d’un titre ou du point focal. Tout le reste en descend, en luminosité ou en saturation.
2. **Donnez-lui des voisins sombres** Les rouges profonds comme `#7f1d1d` et `#4a0e0e` font rayonner le point vif par contraste, comme un seul charbon brille dans un feu sombre.
3. **Fondez vers des couleurs chaudes** L’orange, le corail et le rose sont voisins du rouge sur le cercle chromatique, donc ils se fondent proprement. Voir les [couleurs analogues](https://gradiently.design/fr/guide/analogous-colors) pour comprendre pourquoi les voisines s’entendent toujours.
4. **Limitez le rouge à une part de la création** Le rouge est par nature une couleur d’accent. Même dans une création dominée par le rouge, une grande zone calme aide ; la [règle des 60-30-10](https://gradiently.design/fr/guide/60-30-10-rule) est un bon ratio de départ.
5. **Gardez une autre couleur pour les erreurs** Si votre marque est rouge, donnez aux messages d’erreur un traitement nettement différent, par exemple une icône plus un rouge plus sombre ou tirant sur l’orange, pour qu’un avertissement ne ressemble jamais à de la publicité.

## Texte sur un dégradé rouge

Le rouge se trouve dans un entre-deux délicat pour le texte. Le rouge d’écran pur est trop sombre pour un texte noir confortable et trop clair pour qu’un texte blanc atteigne le minimum du texte courant. La solution : assombrir l’arrière-plan pour un texte blanc, l’éclaircir pour un texte sombre, et vérifier le point le plus clair du dégradé derrière vos mots.

| Arrière-plan | Texte | Contraste | Verdict |
| --- | --- | --- | --- |
| `#ff0000` rouge pur | Blanc | 4.0:1 | Grand texte seulement |
| `#dc2626` rouge | Blanc | 4.8:1 | Convient au texte courant |
| `#b91c1c` cramoisi profond | Blanc | 6.5:1 | Confortable |
| `#7f1d1d` sang-de-bœuf | `#fff1f0` blanc cassé | 9.1:1 | Excellent |
| `#ff6f61` corail | Blanc | 2.7:1 | Insuffisant |
| `#ff6f61` corail | `#1a0505` presque noir | 7.2:1 | Excellent |

Rapports calculés avec la formule WCAG. 4.5:1 est le minimum pour le texte courant et 3:1 pour le grand texte. Détails dans [contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility).

Un post de soldes vertical avec les mots « Soldes d’hiver » en blanc sur un dégradé cramoisi profond

Titre placé sur la partie la plus profonde du rouge, où le texte blanc est confortable.

Une story verticale annonçant une ouverture tardive sur un dégradé rouge chaud avec une lueur vive en haut

Le même rouge en story, avec le point vif tenu à l’écart des mots.

## Où les dégradés rouges fonctionnent le mieux

Le rouge a sa place là où l’énergie et l’appétit sont le but. On le trouve souvent dans la restauration, le sport, le divertissement et les soldes, ainsi que dans le design festif ; dans la tradition chinoise, le rouge est fortement associé à la chance et à la fête, ce qui explique qu’il domine le design du Nouvel An lunaire. Les significations varient selon les cultures : vérifiez la vôtre dans [signification des couleurs dans le monde](https://gradiently.design/fr/guide/color-meanings-around-the-world).

- **Restauration, cafés et restaurants :** les dégradés corail et terre cuite paraissent chauds et appétissants
- **Sport et fitness :** feu cramoisi et écarlate vers vin portent la vitesse et l’effort
- **Mode et beauté :** sang-de-bœuf, vin et rose pâle paraissent réfléchis et haut de gamme
- **Soldes et lancements :** un point vif sur un champ rouge profond attire l’œil sans crier
- **Musique et vie nocturne :** du rouge au noir et lueur de cerise conviennent aux lieux sombres et éclairés

Si vous voulez du rouge sans le reconstruire pour chaque format, le Marché de Gradiently vous permet de chercher des Marks avec des mots comme « rouge profond » ou « corail ». Chaque Mark déplace sa zone la plus calme derrière vos mots, ce qui règle pour vous le problème du texte sur rouge évoqué plus haut.

## FAQ

### Quelles couleurs vont bien avec le rouge dans un dégradé ?

Ses voisines chaudes se fondent le plus proprement : orange, corail, rose et vin profond. Fondre le rouge vers du vert ou du gris fait souvent virer le milieu au brun.

### Peut-on mettre du texte blanc sur un fond rouge ?

Oui, si le rouge est assez profond. Le blanc sur `#dc2626` donne 4.8:1 et convient au texte courant, mais sur `#ff0000` pur il n’atteint que 4:1 : réservez-le au grand texte.

### Quel est le code hex d’un dégradé rouge foncé ?

Essayez `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`, un fondu sang-de-bœuf qui reste rouge d’un bout à l’autre.

### Pourquoi mon dégradé rouge paraît-il agressif ?

Souvent parce que tout le champ est d’un rouge pleinement saturé. Gardez un seul point vif, laissez le reste tomber dans des rouges plus profonds, et évitez de placer le rouge directement contre un bleu saturé.