# Dégradé rose et bleu : codes de la barbe à papa au néon

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

Le rose et le bleu sont un peu trop éloignés pour se fondre en pilote automatique. Soignez le milieu et vous obtenez des ciels de barbe à papa ou des enseignes néon ; ignorez-le et vous obtenez une tache lilas terne.

## The short version

- Un dégradé rose et bleu fond des roses comme #f9a8d4 ou #ec4899 avec des bleus comme #93c5fd ou #3b82f6, en passant généralement par un lilas ou un violet au milieu.
- Comme le rose et le bleu ne sont pas voisins directs, un dégradé direct entre eux peut virer au grisâtre au milieu, et un arrêt lilas ou violet règle le problème.
- Les dégradés rose et bleu pâles évoquent la barbe à papa et demandent une encre foncée, tandis que le rose saturé et le cyan sur un quasi noir évoquent le néon.
- Ni le rose vif ni le bleu moyen ne portent bien un petit texte blanc : gardez le blanc pour les grands titres ou les fonds sombres.
- Le rose et le bleu conviennent aux baby showers, aux confiseries, aux créateurs, au jeu vidéo et aux esthétiques rétro comme le vaporwave et le Y2K.

Un **dégradé rose et bleu** fond un rose comme `#f9a8d4` ou `#ec4899` dans un bleu comme `#93c5fd` ou `#3b82f6`. Les deux sont un peu trop éloignés sur le cercle chromatique pour se mélanger nettement par défaut : les meilleures versions passent donc par un arrêt lilas ou violet au milieu. Gardez le duo pâle et vous obtenez de la barbe à papa ; poussez la saturation sur un fond sombre et vous obtenez du néon. Les codes ci-dessous couvrent toute cette gamme, avec la solution pour le milieu et les couleurs de texte qui fonctionnent.

## Pourquoi un dégradé rose et bleu devient gris au milieu

Les navigateurs mélangent les couleurs d’un dégradé en sRGB par défaut, et entre un rose chaud et un bleu froid, ce mélange peut perdre en saturation et paraître légèrement gris ou poussiéreux. C’est moins spectaculaire qu’avec des couleurs opposées, mais cela se voit, surtout dans les dégradés pastel. La solution : nommer vous-même le milieu en ajoutant un arrêt lilas ou pervenche, pour que chaque point du dégradé reste net.

- Deux arrêts, mélange par défaut: `linear-gradient(90deg, #f472b6 0%, #60a5fa 100%)`
- Avec un pont violet: `linear-gradient(90deg, #f472b6 0%, #c084fc 50%, #60a5fa 100%)`

Le même rose et le même bleu, avec et sans arrêt de liaison. Le second reste saturé au centre. Les [dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) expliquent la science de la couleur.

En CSS, vous pouvez aussi écrire `linear-gradient(90deg in oklch, #f472b6, #60a5fa)`, qui garde clarté et saturation régulières tout au long du dégradé. L’arrêt de liaison fonctionne partout, en revanche, et vous laisse choisir exactement quel lilas apparaît.

## Dégradés barbe à papa : rose et bleu pastel

Un rose pâle qui glisse vers un bleu bébé paraît doux, léger et un peu nostalgique. Gardez un lilas tendre ou une crème entre les deux, et composez les mots en ardoise foncée plutôt qu’en blanc.

- Barbe à papa: `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`
- Couverture de bébé: `linear-gradient(180deg, #fce7f3 0%, #e0f2fe 100%)`
- Nuage de sucre: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #ddd6fe 45%, #a5f3fc 100%)`
- Matin de pêche: `linear-gradient(160deg, #fff7ed 0%, #fbcfe8 40%, #c7d2fe 100%)`

Dégradés rose et bleu pastel. Chacun a une étape lilas, pervenche ou crème, si bien que rien ne devient poussiéreux au milieu.

Pour plus de cette palette douce, les [dégradés pastel](https://gradiently.design/fr/guide/pastel-gradients) et les [palettes de couleurs pastel](https://gradiently.design/fr/guide/pastel-color-palettes) vont plus loin.

> **Imprimer du rose et du bleu pastel** Les dégradés très pâles peuvent presque disparaître sur du papier non couché, et les bleus vifs d’écran s’impriment souvent plus ternes. Foncez légèrement chaque arrêt pour les invitations et les flyers, et demandez une épreuve. Les [dégradés à l’impression](https://gradiently.design/fr/guide/print-gradients) donnent les détails.

## Ciel et sorbet : rose et bleu plus vifs

Montez un peu la saturation et le duo devient ensoleillé et joueur : un ciel d’été en fin de journée, un stand de sorbets, un flyer de fête à la piscine. Ils restent chaleureux plutôt que criards.

- Ciel du soir: `linear-gradient(180deg, #7dd3fc 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Sorbet: `linear-gradient(120deg, #f472b6 0%, #a78bfa 50%, #38bdf8 100%)`
- Fête à la piscine: `radial-gradient(circle at 80% 80%, #fda4af 0%, #a5b4fc 45%, #7dd3fc 100%)`

Dégradés rose et bleu à saturation moyenne. Idéaux pour les promotions d’été et les contenus de créateurs.

## Dégradés rose et bleu néon

Le rose vif et le cyan électrique sur un quasi noir sont la signature du vaporwave, du synthwave et de beaucoup de design de jeu vidéo. Le fond sombre n’est pas facultatif : c’est lui qui fait briller les couleurs. Gardez le néon en bandes, en bords ou en halos, et laissez la majeure partie du cadre sombre. Les [dégradés néon](https://gradiently.design/fr/guide/neon-gradients) et les [couleurs synthwave](https://gradiently.design/fr/guide/synthwave-colors) couvrent ce style en profondeur.

- Conduite de nuit: `linear-gradient(180deg, #0b0720 0%, #3b0764 55%, #ec4899 100%)`
- Enseigne néon: `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`
- Lampe rose, brume cyan: `radial-gradient(ellipse at 20% 80%, #f0abfc 0%, #7e22ce 30%, #155e75 60%, #0b0720 85%)`
- Aube d’arcade: `conic-gradient(from 180deg at 50% 100%, #06b6d4, #8b5cf6, #ec4899, #06b6d4)`

Rose et bleu néon. Le rose pâle et le cyan font tous deux d’excellentes couleurs de texte sur les zones sombres.

## Couleurs de texte sur les dégradés rose et bleu

Les deux extrémités d’un dégradé rose et bleu pastel sont claires : un texte ardoise foncé se lit donc sur toute la surface, ce qui en fait l’un des duos les plus faciles à habiller de texte. Les versions saturées sont plus délicates : le rose vif et le bleu moyen sont chacun trop clairs pour un petit texte blanc. Les valeurs ci-dessous utilisent la formule de contraste WCAG.

| Fond | Texte | Contraste | Verdict |
| --- | --- | --- | --- |
| Chewing-gum `#f9a8d4` | Ardoise `#1e293b` | 8,1:1 | Excellent |
| Bleu bébé `#93c5fd` | Ardoise `#1e293b` | 8,1:1 | Excellent |
| Rose bonbon `#fbcfe8` | Blanc | 1,4:1 | Insuffisant |
| Rose vif `#ec4899` | Blanc | 3,5:1 | Grands titres seulement |
| Bleu `#3b82f6` | Blanc | 3,7:1 | Grands titres seulement |
| Nuit `#0b0720` | Cyan `#67e8f9` | 13,6:1 | Excellent, le néon en encre |

L’ardoise obtient le même score aux deux extrémités pastel : une seule encre fonctionne donc sur tout le dégradé barbe à papa.

Une invitation de baby shower avec un lettrage ardoise foncé sur un dégradé rose tendre, lilas et bleu bébé

Une invitation 5×7 in sur barbe à papa, avec un lettrage ardoise.

Une annonce de stream en paysage avec un lettrage pâle sur un fond sombre éclairé de rose néon et de cyan

Une annonce de stream sur rose néon et cyan par-dessus un quasi noir.

## Où placer un dégradé rose et bleu

- **Baby showers et révélations de genre :** l’usage le plus traditionnel, plus beau dans les pastels les plus pâles.
- **Confiseries, pâtisseries et glaces :** les tons sorbet ont l’air comestibles.
- **Créateurs et streamers :** les versions néon sur fond sombre conviennent au jeu vidéo et aux contenus de fin de soirée.
- **Esthétiques rétro :** le vaporwave, le synthwave et les designs [esthétique Y2K](https://gradiently.design/fr/guide/y2k-aesthetic) s’appuient tous sur ce duo.
- **Pride :** le bleu clair, le rose et le blanc sont les couleurs du drapeau de la fierté transgenre : le duo apparaît donc largement dans le design du mois des fiertés.

## CSS du dégradé rose et bleu

```css
.cotton-candy {
  background: linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%);
  color: #1e293b;
}

.neon {
  background-color: #0b0720;
  background-image:
    radial-gradient(circle at 15% 85%, #ec4899 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, #06b6d4 0%, transparent 40%);
  color: #fce7f3;
}
```

Une section pastel avec texte ardoise, et une section néon sombre avec deux lumières colorées.

Le motif néon, deux lumières radiales sur une base sombre, s’adapte facilement : déplacez les lumières, changez leur taille, ajoutez-en une troisième en violet là où elles se rejoignent. Gardez les lumières petites ; dès qu’elles couvrent plus de la moitié du cadre, le fond sombre disparaît, et le halo avec lui. Dans Gradiently, un Mark va plus loin : sa lumière bouge lentement et sa typographie s’adapte à la partie du dégradé sur laquelle elle se trouve. Un seul design s’exporte en publication fixe, ou, avec Pro, en MP4 ou GIF en boucle.

## FAQ

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

Pour la barbe à papa, essayez `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`. Pour le néon, `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`.

### Pourquoi mon dégradé rose et bleu est-il gris au milieu ?

Un dégradé sRGB direct entre un rose chaud et un bleu froid perd en saturation à mi-chemin. Ajoutez un arrêt lilas ou violet au milieu, ou écrivez `in oklch` après l’angle.

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

Une ardoise foncée comme `#1e293b` se lit aux deux extrémités, avec un contraste d’environ 8:1. Le blanc échoue sur le rose et le bleu pastel.

### Qu’est-ce qu’un dégradé barbe à papa ?

Un dégradé pastel de rose et de bleu bébé, généralement avec une étape lilas entre les deux, qui tire son nom de la confiserie.

### Comment faire un dégradé rose et bleu néon ?

Utilisez un rose saturé et un cyan sur un fond quasi noir, en halos ou en bandes plutôt qu’en remplissage complet. C’est le fond sombre qui donne aux couleurs l’air d’être éclairées.