# Dégradés roses modernes, loin de l’effet bonbon

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

Le rose peut évoquer une confiserie ou un magazine de mode. La différence tient rarement au rose lui-même, mais à ce que vous mettez à côté. Voici des palettes, des associations et des codes pour un rose actuel.

## The short version

- Un dégradé rose mêle des nuances de rose, du rose poudré pâle et du vieux rose au corail et au rose vif, souvent avec une pêche, un rouge ou un violet voisins.
- Le rose paraît mièvre quand il est pâle, saturé et associé uniquement à d’autres pastels, et moderne quand il est associé à un ton profond.
- Des partenaires profonds comme le sang-de-bœuf, le bleu marine, le vert forêt et le presque noir donnent du contraste au rose et un air éditorial.
- Le texte blanc fonctionne sur les roses profonds comme #be185d, mais passe sous le contraste requis pour le texte courant sur des roses plus vifs comme #ec4899.
- Les roses poudrés, légèrement grisés, paraissent plus adultes que les roses bonbon purs, et conviennent aux marques de mode, de beauté et de culture.

Un **dégradé rose** mêle des nuances de rose, du rose poudré pâle et du vieux rose au corail, jusqu’au rose vif et au framboise, souvent avec une pêche, un rouge ou un violet voisins. Le rose vit un long moment de gloire dans la mode, la beauté, l’alimentation et la culture, mais il a un travers bien connu : trop pâle, trop doux, trop sucré. Le remède est presque toujours le contraste. Associez le rose à quelque chose de profond et il devient net et éditorial. Voici des palettes, des associations et des codes CSS pour des dégradés roses modernes.

## L’éventail des roses

Le rose est un rouge éclairci, mais la famille est large. Le rose poudré et le vieux rose sont doux et légèrement grisés, ce qui les rend calmes et adultes. Le corail et le saumon tirent vers l’orange et paraissent chauds et ensoleillés. Le rose vif et le fuchsia tirent vers le violet et paraissent bruyants et joueurs. Le framboise et la baie sont assez profonds pour porter un texte blanc.

- Rose poudré: #fbe4e4
- Vieux rose: #e8b4b8
- Saumon: #f9a28b
- Rose corail: #fb7185
- Rose vif: #ec4899
- Fuchsia: #c026d3
- Framboise: #be185d
- Baie: #831843

Huit roses, du plus pâle au plus profond. Doux et grisés à gauche, bruyants au milieu, profonds à droite.

Le rose que vous choisissez donne le ton avant tout le reste :

- **Beauté et soin de la peau :** rose poudré et vieux rose, souvent avec du crème et un brun chaud.
- **Mode et édition :** vieux rose ou rose vif face au noir, au bleu marine ou au sang-de-bœuf.
- **Alimentation et boissons :** corail, saumon et framboise, les couleurs des fruits et des sorbets.
- **Musique et vie nocturne :** rose vif et fuchsia qui brillent sur un presque noir.
- **Mariages et papeterie :** rose poudré et rose sur papier chaud, avec des détails vert profond ou bordeaux.

Les roses pâles rejoignent la grande famille des pastels ; [les dégradés pastel](https://gradiently.design/fr/guide/pastel-gradients) explique comment les garder frais sur plusieurs teintes.

## Pourquoi le rose devient mièvre

### Mièvre

- Un rose pâle fondu avec du bleu layette ou du lilas
- Que des pastels, rien de sombre
- Un rose bonbon pur et vif, sans aucun gris
- Une typographie ronde et pétillante dans le même rose

### Moderne

- Le rose posé face à un ton profond
- Une couleur sombre franche pour le texte et le poids
- Des roses poudrés, légèrement éteints
- Une typographie nette en presque noir ou en crème

Aucun de ces choix mièvres n’est faux en soi ; les marques pour enfants et la confiserie les utilisent exprès. Mais si vous voulez que le rose paraisse assuré plutôt que mignon, il vous faut du poids quelque part dans la création, et une couleur partenaire profonde est le moyen le plus rapide d’en obtenir.

## Dégradés roses doux

Les roses doux paraissent calmes, chaleureux et tactiles. Ils conviennent au soin de la peau, à la papeterie, aux mariages et au bien-être. Gardez-les un peu poudrés plutôt que vifs, et utilisez une encre sombre pour le texte.

- Papier rose poudré: `linear-gradient(135deg, #fdf2f0 0%, #f6cfd2 100%)`
- Vieux rose: `linear-gradient(160deg, #f5e1dc 0%, #e8b4b8 55%, #c98b95 100%)`
- Rose vers abricot: `linear-gradient(135deg, #fde2e4 0%, #fed7aa 100%)`
- Lueur de pétale: `radial-gradient(circle at 30% 30%, #fff1f2 0%, #fbcfe8 45%, #e9a6c0 100%)`

Des dégradés roses doux. L’abricot et le rose éteint les gardent chaleureux sans sucre.

## Le rose avec des tons profonds

C’est là que le rose devient éditorial. Un partenaire profond donne au rose quelque chose contre quoi briller, et à la typographie une base solide où se poser. Les associations ci-dessous sont courantes dans la mode, l’édition et l’hôtellerie, et ce n’est pas un hasard.

- Sang-de-bœuf vers rose: `linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%)`
- Marine vers rose: `linear-gradient(160deg, #0f1a33 0%, #3a2a5c 50%, #f9a8c2 100%)`
- Forêt et rose, partagés: `linear-gradient(90deg, #14352a 0% 50%, #f7b6c2 50% 100%)`
- Cacao vers rose: `linear-gradient(160deg, #1c1210 0%, #4a2c25 50%, #e9a8a0 100%)`
- Lumière rose sur noir: `radial-gradient(circle at 70% 80%, #ff7ab8 0%, #7a1f4b 40%, #0d0508 80%)`
- Prune vers framboise: `linear-gradient(135deg, #3b0764 0%, #9d174d 55%, #fda4af 100%)`

Le rose avec des partenaires profonds. L’association avec le vert forêt utilise une séparation nette, car le rose et le vert sont presque opposés et se mélangeraient en gris.

Le vert et le rose sont presque opposés sur le cercle chromatique : ils forment une paire frappante mais un mauvais fondu. Gardez-les dans des zones séparées, comme dans la séparation ci-dessus. [Les couleurs complémentaires](https://gradiently.design/fr/guide/complementary-colors) explique pourquoi les opposés virent au gris une fois mélangés.

## Dégradés roses vifs et audacieux

Les roses vifs sont les couleurs les plus bruyantes de la famille. Ils conviennent à la musique, à la vie nocturne, aux temps forts des soldes et aux marques qui veulent se voir d’un bout à l’autre d’une pièce. Fondez-les vers l’orange ou le violet, jamais vers le vert ou le bleu canard.

- Rose vers mandarine: `linear-gradient(135deg, #db2777 0%, #f97316 100%)`
- Montée framboise: `linear-gradient(135deg, #be185d 0%, #ec4899 50%, #f9a8d4 100%)`
- Violet vers rose: `linear-gradient(135deg, #7c3aed 0%, #ec4899 100%)`
- Coucher de soleil rose: `linear-gradient(180deg, #ff4d8d 0%, #ff8a5c 60%, #ffd29d 100%)`

Des dégradés roses éclatants. Chacun se fond vers un voisin chaud ou violet, pour que le milieu reste lumineux.

Le violet vers rose est l’un des dégradés les plus vus sur Internet. Si vous l’utilisez, appropriez-le-vous avec un fond profond, une touche de lumière chaude ou du grain. Le guide des [dégradés violets](https://gradiently.design/fr/guide/purple-gradient) en dit plus.

## Le rose en design éditorial

Une couverture éditoriale en portrait intitulée Le numéro douceur sur un dégradé aux tons roses

Le rose en couverture de magazine : un fond calme, une typographie assurée.

Un post citation carré avec une typographie sombre sur un dégradé doux

Un post citation où la typographie sombre donne du poids au rose.

Le rose éditorial fonctionne parce qu’il traite la couleur comme un fond, pas comme une décoration. Un seul grand champ, de l’espace généreux, une typographie nette à empattements ou grotesque en presque noir ou en crème, et un détail dans une couleur partenaire profonde. [Le design éditorial pour les réseaux sociaux](https://gradiently.design/fr/guide/editorial-design-for-social) détaille ces procédés.

## Du texte sur des dégradés roses

| Texte sur fond | Contraste | Verdict |
| --- | --- | --- |
| Blanc sur `#831843` | 9,7:1 | Excellent |
| Blanc sur `#be185d` | 6,0:1 | Bien pour le texte courant |
| Blanc sur `#db2777` | 4,6:1 | Tout juste suffisant pour le texte courant |
| Blanc sur `#ec4899` | 3,5:1 | Grands textes uniquement |
| `#3b0a1e` sur `#f472b6` | 6,4:1 | Une encre sombre fonctionne ici |
| `#1f2a44` sur `#f9c6d0` | 9,5:1 | Marine sur rose : excellent |

Ratios de contraste WCAG, calculés. Le texte courant demande 4,5:1, les grands textes 3:1.

```css
.cover {
  background-color: #2a0a12;
  background-image: linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%);
  color: #fdf2f0;
}
```

Sang-de-bœuf vers rose, avec un texte crème. Placez les mots dans la partie haute, plus sombre, du champ.

Sur un dégradé, vérifiez toujours le contraste là où le rose est le plus clair derrière le texte. [Le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) montre comment trouver la zone calme.

## FAQ

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

La pêche, le corail, le rouge et le violet se fondent proprement avec le rose. Pour le contraste, associez le rose à des tons profonds comme le sang-de-bœuf, le bleu marine, le cacao ou le presque noir. Gardez le vert dans une zone séparée, car le rose et le vert se mélangent en gris.

### Comment rendre le rose moins enfantin ?

Utilisez des roses poudrés ou profonds plutôt qu’un rose bonbon vif, ajoutez une couleur partenaire profonde et composez le texte en presque noir ou en crème plutôt que dans un autre rose.

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

Le blanc fonctionne sur les roses profonds comme le framboise et la baie. Sur les roses plus clairs, utilisez une encre sombre comme un bordeaux profond ou un bleu marine.

### Quel est le CSS d’un dégradé rose ?

Par exemple, linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%) donne un dégradé du sang-de-bœuf au rose. Toutes les palettes de cette page peuvent être copiées en CSS.