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

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.

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.

Pour plus de cette palette douce, les dégradés pastel et les palettes de couleurs pastel vont plus loin.

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.

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 et les couleurs synthwave couvrent ce style en profondeur.

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.

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 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

.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;
}

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.