# Dégradés orange et rose : codes chauds au-delà du couchant

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

L’orange et le rose sont voisins, ce qui en fait l’un des mélanges les plus chauds et les plus faciles. Le défi n’est pas de les fondre ; c’est de ne pas ressembler à tous les préréglages de coucher de soleil.

## The short version

- Un dégradé orange et rose fond des teintes chaudes voisines comme la mandarine #f97316, le corail #fb7185 et le rose #ec4899 : la transition reste vive, sans couleur de liaison.
- Ce duo est si étroitement associé aux couchers de soleil qu’une simple diagonale de l’orange au rose passe pour un préréglage, et changer le fond ou la clarté permet de l’éviter.
- L’orange vif et le rose vif sont tous deux trop clairs pour un petit texte blanc, tandis qu’une encre rouille profond ou brun brûlé se lit bien sur les versions plus douces.
- Les versions terreuses en terre cuite et vieux rose paraissent calmes et adultes, et les versions sombres en braise et framboise paraissent chaudes et nocturnes.
- L’orange et le rose conviennent à la cuisine, aux boissons, à la beauté, aux campagnes d’été, au voyage et à toute marque qui veut paraître chaleureuse et accueillante.

Un **dégradé orange et rose** fond deux voisins chauds : une mandarine comme `#f97316` ou une pêche comme `#fed7aa` d’un côté, un rose comme `#ec4899` ou un blush comme `#fda4af` de l’autre, généralement avec du corail entre les deux. Comme les teintes sont côte à côte, le dégradé ne devient jamais boueux. Ce qu’il peut devenir est prévisible, car cette combinaison est le raccourci du coucher de soleil. Les codes ci-dessous sont regroupés par ambiance, de la pêche douce à la braise sombre, pour que vous choisissiez une version qui vous ressemble plutôt qu’un fond d’écran de téléphone.

## Les couleurs entre l’orange et le rose

Marchez de l’orange au rose et vous passez par le corail, le saumon et la pastèque, tous saturés et chauds. Éclaircissez le chemin et vous obtenez l’abricot, la pêche et le blush. Assombrissez-le et vous obtenez la rouille, la terre cuite et la framboise. La plupart des bons dégradés orange et rose utilisent trois arrêts de la même bande de clarté plutôt qu’un saut de la pêche pâle au rose vif.

- Crème: #fff7ed
- Pêche: #fed7aa
- Blush: #fda4af
- Abricot: #fb923c
- Corail: #fb7185
- Mandarine: #f97316
- Rose vif: #ec4899
- Rouille: #9a3412
- Terre d’ombre brûlée: #431407

La gamme de l’orange au rose, avec une crème et deux bruns foncés pour les fonds et le texte.

## Dégradés pêche douce et blush

L’orange et le rose pâles ensemble évoquent la peau, le lin et la lumière du petit matin. Ils conviennent donc naturellement aux soins de la peau, au mariage, au bien-être et aux boulangeries. Ils se photographient aussi bien derrière des produits, car ils flattent les tons chauds. Composez le texte en rouille profond plutôt qu’en noir : il garde la chaleur.

- Lin pêche: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`
- Blush d’abricot: `radial-gradient(circle at 70% 30%, #ffe4e6 0%, #fed7aa 60%, #fdba74 100%)`
- Première lumière: `linear-gradient(180deg, #fde68a 0%, #fecaca 55%, #fbcfe8 100%)`

Orange et rose doux. Une encre rouille ou terre d’ombre brûlée se lit bien sur les trois. Les [dégradés pêche](https://gradiently.design/fr/guide/peach-gradient) en présentent davantage dans cette famille.

## Dégradés corail, pamplemousse et pastèque

L’orange et le rose saturés, c’est l’été à l’état pur : jus de pamplemousse, serviettes de plage, affiches de festival. Ils sont assez vifs pour arrêter un défilement et assez chaleureux pour ne pas paraître agressifs. Tenez-les loin du très petit texte, et laissez-leur un coin calme.

- De la mandarine au rose: `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`
- Pamplemousse: `radial-gradient(circle at 25% 75%, #fdba74 0%, #fb7185 45%, #e11d48 100%)`
- Pastèque: `linear-gradient(160deg, #fb923c 0%, #f43f5e 70%, #be185d 100%)`
- Smoothie à la mangue: `linear-gradient(90deg, #fbbf24 0%, #fb923c 35%, #f472b6 100%)`

Dégradés orange et rose vifs. Chaque arrêt est un proche voisin du suivant, si bien que le milieu reste éclatant. Les [dégradés corail](https://gradiently.design/fr/guide/coral-gradient) vont plus loin.

## Terre cuite et vieux rose terreux

Atténuez les deux couleurs et le duo devient calme et ancré, la palette des pots d’argile, des fleurs séchées et des murs cuits par le soleil. C’est la version la moins utilisée et souvent la plus élégante. Elle s’accorde sans effort avec l’olive, le sable et la crème, et fonctionne bien aux côtés des [palettes de couleurs terre](https://gradiently.design/fr/guide/earth-tone-colors).

- Argile et rose: `linear-gradient(135deg, #f5e6d8 0%, #d9967a 55%, #c27c7c 100%)`
- Crépuscule de terre cuite: `radial-gradient(circle at 80% 20%, #e8a598 0%, #b4644a 50%, #6b2f22 100%)`
- Pétales séchés: `linear-gradient(180deg, #faf3ec 0%, #e7b9a8 50%, #b97a6f 100%)`

Orange et rose atténués. Ils paraissent faits main et calmes, et conviennent aux intérieurs, à la céramique, aux fleuristes et aux marques de slow living.

> **Derrière des photos de produits** Les dégradés chauds et atténués flattent la peau, le bois, le pain et la céramique, car ils en reprennent les couleurs. Choisissez un arrêt dans le produit lui-même et construisez le dégradé à partir de lui. Les [fonds de photos de produits](https://gradiently.design/fr/guide/product-photo-backgrounds) montrent comment.

## Dégradés braise sombre et framboise

Partez d’un fond brun profond ou prune et laissez l’orange et le rose en jaillir : le duo cesse d’être joyeux pour devenir intime, lueur de bougie, braises, carte de cocktails. Ils portent sans effort un texte clair, ce qui les rend pratiques pour les affiches d’événement et les offres du soir.

- Braise: `radial-gradient(circle at 75% 80%, #fb923c 0%, #9f1239 35%, #1c0708 80%)`
- De la rouille à la framboise: `linear-gradient(160deg, #1f0a0a 0%, #7c2d12 45%, #db2777 100%)`
- Dernière lumière: `radial-gradient(ellipse at 50% 100%, #fdba74 0%, #be185d 40%, #2a0a14 85%)`

Orange et rose sombres. Ajoutez du grain, car les dégradés chauds sombres montrent facilement le banding.

## Comment éviter le cliché du coucher de soleil

L’orange vers le rose sur une diagonale à 45 degrés est partout, des fonds d’écran de téléphone aux icônes d’application : on le lit donc comme un réglage par défaut. Si vous voulez la chaleur sans le préréglage, changez au moins l’un des points ci-dessous. Les [dégradés coucher de soleil](https://gradiently.design/fr/guide/sunset-gradient) couvrent la version littérale si c’est ce que vous voulez.

### Préréglage

- Orange vif vers rose vif, deux arrêts
- Diagonale franche à 45 degrés
- Couleur répartie uniformément dans le cadre
- Texte blanc sur la zone la plus claire

### Pensé

- D’abord un fond : crème, argile ou braise
- Lumière venant d’un coin, avec un dégradé radial
- Arrêts inégaux, une couleur dominante
- Encre rouille sur les versions douces, encre crème sur les sombres

## Couleurs de texte sur orange et rose

L’orange est l’une des couleurs saturées les plus claires : le texte blanc sur mandarine ou abricot est donc plus faible qu’il n’y paraît. Le rouille profond ou la terre d’ombre brûlée est l’encre fiable sur les versions douces et vives ; la crème convient aux sombres. Les rapports utilisent la formule WCAG, où 4,5:1 est le minimum habituel pour le corps du texte, et le [contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility) explique le reste.

| Fond | Texte | Contraste | Verdict |
| --- | --- | --- | --- |
| Abricot `#fb923c` | Blanc | 2,3:1 | Insuffisant |
| Mandarine `#f97316` | Blanc | 2,8:1 | Insuffisant pour la plupart des textes |
| Pêche `#fed7aa` | Terre d’ombre brûlée `#431407` | 11,6:1 | Excellent |
| Corail `#fb7185` | Terre d’ombre brûlée `#431407` | 5,8:1 | Bon |
| Orange profond `#c2410c` | Blanc | 5,2:1 | Bon |
| Framboise `#be185d` | Blanc | 6,0:1 | Bon |

Si le texte blanc compte dans votre design, assombrissez les arrêts qui sont derrière lui jusqu’à l’orange profond ou la framboise.

Une promotion de bar verticale avec un lettrage crème sur un dégradé sombre aux lueurs orange et framboise

Une promotion de bar sur braise vers framboise, avec une typographie crème côté sombre.

Une publication carrée de soin de la peau avec un lettrage brun foncé sur un dégradé pêche et blush doux

Une publication de soin de la peau sur pêche et blush avec une encre terre d’ombre brûlée.

## CSS du dégradé orange et rose

```css
.warm-hero {
  background-color: #fff7ed;
  background-image:
    radial-gradient(circle at 85% 20%, #fb7185 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #fdba74 0%, transparent 50%),
    linear-gradient(160deg, #fff7ed 0%, #fed7aa 100%);
  color: #431407;
}
```

Un fond crème avec une lumière corail en haut à droite et abricot en bas à gauche, et un texte terre d’ombre brûlée.

Superposer deux lumières radiales douces sur une base pâle donne une chaleur bien plus naturelle qu’une seule diagonale. Si vous voulez une chaleur qui vous appartienne sans équivoque, le Marché de Gradiently vous permet de chercher des Marks par mots de couleur comme « corail » ou « pêche ». Chaque Mark est unique, avec exactement un propriétaire à la fois, et une fois que vous l’avez réservé, vous seul pouvez exporter avec lui.

## FAQ

### Quel est un bon code de dégradé orange et rose ?

Un classique vif est `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`. Pour une version plus douce, essayez `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`.

### L’orange et le rose vont-ils ensemble ?

Oui. Ils sont voisins sur le cercle chromatique, avec le corail entre les deux : ils se fondent donc nettement et paraissent chauds.

### Quelle couleur de texte sur un dégradé orange et rose ?

Un rouille profond ou une terre d’ombre brûlée comme `#431407` se lit bien sur les versions douces et vives. Le blanc ne fonctionne que sur les arrêts plus profonds, comme `#c2410c` ou `#be185d`.

### Comment faire un dégradé orange et rose qui ressemble moins à un coucher de soleil ?

Partez d’un fond comme la crème, l’argile ou une braise sombre, éclairez-le depuis un coin plutôt qu’en diagonale, et laissez une couleur dominer.

### Quelle couleur se trouve entre l’orange et le rose ?

Le corail, autour de `#fb7185`, avec le saumon et la pastèque comme proches parents.