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

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

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.

Pour plus de douceur, les dégradés pastel couvrent toute la famille, et les dégradés lavande 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.

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.

Ils sont proches des dégradés coucher de soleil et des dégradés galaxie, 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.

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

1. 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. 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. 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. 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 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é explique les seuils.

CSS du dégradé rose et violet

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

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