# Dégradé rose et violet : codes du bonbon au crépuscule

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

Le rose et le violet peuvent être sucrés, glamour ou discrètement sombres, selon la clarté et la saturation. Voici les codes de chaque étape de cette gamme, et comment choisir.

## The short version

- Un dégradé rose et violet fond des teintes voisines comme le rose #ec4899, le magenta #c026d3 et le violet #9333ea : la transition reste vive, sans couleur de liaison.
- Le même duo évoque la barbe à papa quand il est pâle, le glamour quand il est saturé et le crépuscule quand il est sombre.
- Le texte blanc échoue sur le rose vif et le lilas pâle : utilisez-y une encre prune profond, et gardez le blanc pour le magenta, le violet et les fonds sombres.
- Ajouter un peu d’orange, de bleu ou d’or à un dégradé rose et violet le rend bien moins attendu que le mélange standard à deux couleurs.
- Le rose et le violet conviennent à la beauté, à la vie nocturne, à la musique, aux fêtes et aux marques de créateurs, et un fond sombre les empêche de paraître enfantins.

Un **dégradé rose et violet** fond deux voisins du cercle chromatique, un rose comme `#ec4899` et un violet comme `#9333ea`, avec le magenta et l’orchidée entre les deux. Comme les teintes sont adjacentes, le dégradé reste vif d’un bout à l’autre. Ce qui change tout, c’est la clarté : restez pâle et vous obtenez de la barbe à papa, poussez la saturation et vous obtenez du glamour, passez au sombre et vous obtenez le crépuscule. Les codes ci-dessous vont du clair au sombre : choisissez d’abord l’ambiance, les valeurs hex ensuite.

## Les ambiances du dégradé rose et violet en un coup d’œil

| Ambiance | Arrêts typiques | Impression | Convient pour |
| --- | --- | --- | --- |
| Bonbon | `#fbcfe8` à `#e9d5ff` | Sucré, doux, jeune | Pâtisseries, baby showers, papeterie |
| Orchidée | `#f0abfc` à `#c084fc` | Rêveur, romantique | Beauté, mariages, bien-être |
| Magenta | `#ec4899` à `#9333ea` | Audacieux, glamour | Vie nocturne, musique, créateurs |
| Crépuscule | `#2e0a2f` à `#9d174d` | Sombre, adulte | Parfums, cocktails, soirées tardives |

Quatre ambiances avec un seul duo. Chaque ligne du tableau est plus sombre ou plus saturée que la précédente.

- Rose bonbon: #fbcfe8
- Chewing-gum: #f9a8d4
- Rose vif: #ec4899
- Magenta: #c026d3
- Violet orchidée: #a855f7
- Violet: #9333ea
- Lilas: #e9d5ff
- Encre prune: #2e0a2f

Une palette de travail pour le duo, avec les extrémités claire et sombre dont vous avez besoin pour le texte.

## Dégradés rose et violet bonbon

Des roses et des lilas pâles ensemble, c’est ce que la couleur a de plus doux. Ils conviennent à tout ce qui est tendre ou délicat, mais peuvent vite virer à l’enfantin. La solution : un fond légèrement chaud, une pêche ou une crème à une extrémité, et une typographie foncée très affirmée.

- Barbe à papa: `linear-gradient(135deg, #fce7f3 0%, #fbcfe8 45%, #e9d5ff 100%)`
- Lait à la fraise: `linear-gradient(180deg, #fff1f2 0%, #f5d0fe 100%)`
- Pêche, rose, lilas: `radial-gradient(circle at 25% 25%, #ffedd5 0%, #fbcfe8 45%, #ddd6fe 100%)`

Dégradés bonbon, tous composés avec une encre prune profond. La pêche du troisième l’empêche de paraître sucré.

Pour plus de douceur, les [dégradés pastel](https://gradiently.design/fr/guide/pastel-gradients) couvrent toute la famille, et les [dégradés lavande](https://gradiently.design/fr/guide/lavender-gradient) penchent davantage vers le violet.

## Dégradés orchidée et magenta

Montez la saturation et le duo devient glamour. C’est le territoire du vernis à ongles, des bracelets de festival et des pochettes d’album. Utilisez un léger angle ou un halo radial plutôt qu’une diagonale plate, et laissez une zone plus calme pour les mots.

- Du rose vif au violet: `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`
- Éclosion d’orchidée: `radial-gradient(circle at 70% 30%, #f0abfc 0%, #c026d3 45%, #6b21a8 100%)`
- Glamour de baies: `linear-gradient(160deg, #db2777 0%, #a21caf 60%, #581c87 100%)`
- Tourbillon irisé: `conic-gradient(from 90deg at 40% 60%, #f472b6, #a855f7, #e879f9, #f472b6)`

Dégradés rose et violet saturés. Le conique donne un scintillement, proche des [dégradés holographiques](https://gradiently.design/fr/guide/holographic-gradients).

## Crépuscule : dégradés rose et violet sombres

Passez le duo au sombre et il mûrit aussitôt. Un fond noir prune avec une lumière framboise et violette évoque le ciel vingt minutes après le coucher du soleil, ou un bar à cocktails à l’éclairage tamisé. Ce sont les plus polyvalents de la série, et ils portent sans effort un texte blanc ou rose pâle.

- Vingt minutes après le coucher: `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`
- Lueur framboise: `radial-gradient(circle at 80% 85%, #db2777 0%, #4a044e 40%, #12041a 80%)`
- De la prune au rose: `linear-gradient(135deg, #2e0a2f 0%, #6b21a8 55%, #f472b6 100%)`
- Projecteur violet: `radial-gradient(ellipse at 50% 0%, #a855f7 0%, #3b0764 45%, #0c0414 85%)`

Dégradés rose et violet sombres. Ajoutez un grain fin, car les dégradés sombres montrent le banding en premier.

Ils sont proches des [dégradés coucher de soleil](https://gradiently.design/fr/guide/sunset-gradient) et des [dégradés galaxie](https://gradiently.design/fr/guide/galaxy-gradient), et vous pouvez puiser librement dans les deux.

## Ajouter une troisième couleur sans ternir le résultat

La diagonale standard du rose vif au violet est partout : une couleur de plus est donc le moyen le plus rapide de se l’approprier. Choisissez une couleur voisine du rose ou du violet : l’orange et le corail se tiennent à côté du rose, le bleu et l’indigo à côté du violet. Le vert se trouve à l’opposé du magenta, ce qui explique pourquoi un dégradé du rose au vert vire au gris au milieu.

- Violet, rose, mandarine: `linear-gradient(120deg, #7c3aed 0%, #ec4899 55%, #fb923c 100%)`
- Heure bleue: `linear-gradient(160deg, #1e3a8a 0%, #7e22ce 50%, #f472b6 100%)`
- Magenta et or: `radial-gradient(circle at 85% 15%, #fcd34d 0%, #a21caf 35%, #2e0a2f 80%)`

Trois dégradés rose et violet avec une troisième couleur voisine. Chaque étape reste saturée.

## Comment choisir un dégradé rose et violet pour votre marque

1. **Décidez d’abord clair ou sombre** L’ambiance vient surtout de la clarté. Un dégradé pâle dit la douceur ; un fond prune dit la soirée. Choisissez-en un et gardez-le pour chaque publication.
2. **Choisissez la couleur dominante** Un rose dominant paraît plus chaleureux et plus joueur. Un violet dominant paraît plus frais et plus mystérieux. Donnez à la couleur dominante environ deux tiers de la surface.
3. **Prévoyez où se placent les mots** Posez le titre sur l’extrémité la plus sombre et la plus calme, et le rose le plus vif dans un coin, pour ne jamais disputer l’attention au fond.
4. **Testez à chaque format** Un dégradé réussi sur une publication carrée peut placer sa zone la plus claire derrière le texte sur une story. Vérifiez publication, story et bannière avant de vous engager.

Si vous publiez souvent, notez le résultat sous forme de courte recette : fond, couleur dominante, accent, emplacement de la lumière. Cette seule ligne garde cohérent un fil entier, ce qui compte plus que n’importe quel beau dégradé isolé. La [cohérence de marque](https://gradiently.design/fr/guide/brand-consistency) va plus loin.

## Couleurs de texte sur rose et violet

Le rose vif est plus clair qu’il n’en a l’air : les titres blancs sur rose vif sont donc plus faibles qu’on ne le croit. Le violet et le magenta portent bien le blanc. À l’extrémité pâle, un prune profond est l’encre qui garde le design dans la même famille. Les rapports sont des contrastes WCAG ; visez 4,5:1 pour le petit texte et 3:1 au minimum pour les grands titres. [Contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) explique les seuils.

| Fond | Texte | Contraste | Verdict |
| --- | --- | --- | --- |
| Rose vif `#ec4899` | Blanc | 3,5:1 | Grands titres seulement |
| Rose profond `#db2777` | Blanc | 4,6:1 | Bon |
| Magenta `#c026d3` | Blanc | 4,7:1 | Bon |
| Violet `#9333ea` | Blanc | 5,4:1 | Bon |
| Chewing-gum `#f9a8d4` | Encre prune `#3b0a3f` | 8,9:1 | Excellent |
| Encre prune `#2e0a2f` | Chewing-gum `#f9a8d4` | 9,6:1 | Excellent, le rose en encre |

Mesurez derrière chaque ligne de texte, au point le plus clair du dégradé.

Une publication verticale de salon d’ongles avec un lettrage blanc sur un dégradé rose et violet saturé

Une publication de salon d’ongles sur orchidée saturée, texte blanc côté violet.

Une story verticale de soirée club avec un lettrage rose pâle sur un dégradé prune sombre éclairé de framboise en bas

Une story de soirée club sur prune crépusculaire, avec une lumière framboise en bas du cadre.

## CSS du dégradé rose et violet

```css
.dusk {
  background-color: #1e0b2e;
  background-image:
    radial-gradient(circle at 80% 85%, #db2777 0%, transparent 45%),
    linear-gradient(180deg in oklch, #1e0b2e 0%, #581c87 100%);
  color: #fce7f3;
}

.headline-gradient {
  background: linear-gradient(90deg, #ec4899, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Une section crépuscule avec une lueur framboise, et un titre du rose au violet avec texte à fond découpé.

Le texte en dégradé est frappant, mais réservez-le à de courts mots d’affichage, jamais au corps du texte. Le [texte en dégradé CSS](https://gradiently.design/fr/guide/css-gradient-text) couvre les solutions de repli. Si vous voulez un rose et violet que personne d’autre ne peut publier, le Marché de Gradiently vous permet de chercher des Marks par mots de couleur comme « orchidée ». Chaque Mark est unique, et une fois que vous l’avez réservé, vous seul pouvez exporter avec lui ; il garde aussi la typographie lisible aux deux extrémités du dégradé, tout seul.

## FAQ

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

Un classique est `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`. Pour quelque chose de plus sombre, essayez `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`.

### Le rose et le violet vont-ils ensemble ?

Oui. Ils sont voisins sur le cercle chromatique, avec le magenta entre les deux, et se fondent donc nettement à toute clarté.

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

Le blanc se lit bien sur le magenta, le violet et le prune sombre. Sur le rose vif, n’utilisez le blanc que pour les grands titres, et sur le rose ou le lilas pâle, un prune profond comme `#3b0a3f`.

### Comment rendre un dégradé rose et violet moins enfantin ?

Allez vers le plus sombre ou le plus saturé, utilisez un fond prune, et ajoutez une troisième couleur plus adulte, comme l’or ou un bleu profond, sur une petite zone.

### Quelle couleur se trouve entre le rose et le violet ?

Le magenta, autour de `#c026d3`, avec l’orchidée comme version plus claire.