Dégradé bleu violet : 20 codes qui se fondent bien

Un dégradé bleu violet court entre des teintes voisines du cercle chromatique : le bleu #3b82f6, l’indigo #4f46e5, le violet #7c3aed et les pervenches et lavandes douces qui les entourent. Comme les teintes sont côte à côte, le dégradé reste net presque automatiquement. Le plus difficile est d’en faire un qui ne ressemble pas aux milliers d’icônes d’application et de diapositives de conférence qui en utilisent déjà un. Voici vingt codes en quatre ambiances, les cas où le dégradé devient terne, et les couleurs de texte lisibles sur chacun.

Pourquoi le bleu et le violet se fondent si bien

Le violet, c’est du bleu avec un peu de rouge. Passez de l’un à l’autre : chaque étape intermédiaire est une vraie couleur saturée, bleu, indigo, violet. Comparez avec un dégradé du bleu vers l’orange, où le point médian est un gris plat. Les couleurs analogues expliquent le principe, et le cercle chromatique montre où se place chaque teinte.

Dégradés bleu violet sombres : nuit et profondeur

Partez du sombre et le dégradé paraît aussitôt moins banal. Un fond de minuit avec une lumière indigo et violette évoque un ciel nocturne, une salle de concert ou une application haut de gamme. Ces cinq portent à merveille un texte clair.

Dégradés bleu violet doux : pervenche et lavande

Éclaircissez la famille et elle devient calme, rêveuse et un peu nostalgique. Ces dégradés conviennent au bien-être, au sommeil, à la papeterie et à tout ce qui vise une ambiance douce. Gardez une encre foncée : le blanc disparaît sur presque tous. Il y en a d’autres dans les dégradés pastel.

Dégradés bleu violet électriques

Poussez la saturation et le duo devient fort, synthétique, très numérique. Ces dégradés conviennent au jeu vidéo, à la musique, aux lancements tech et à tout ce qui est nocturne. Utilisez-les en bandes ou en halos plutôt que sur une affiche entière, et associez-les à un quasi noir pour qu’ils aient un fond contre lequel briller. Les dégradés néon détaillent la technique.

Dégradés bleu violet avec une troisième couleur

Le moyen le plus rapide de s’approprier un dégradé bleu violet : une couleur de plus, utilisée avec parcimonie. Le rose l’emmène vers le crépuscule, le turquoise vers l’aurore, l’or vers le luxe et la pêche vers un lever de soleil doux.

Quand un dégradé bleu violet devient boueux

Du bleu au violet, tout va bien. Deux dégradés voisins sont plus risqués. Le cyan vers le rose traverse une grande partie du cercle, et des bleus grisâtres vers des violets ternes donnent un milieu sans vie. Dans les deux cas, la solution est la même : interpoler en OKLCH, qui garde luminosité et saturation régulières tout au long du dégradé. Les dégradés boueux et l’interpolation des dégradés vont plus loin.

/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}

Comment rendre un dégradé bleu violet moins banal

La diagonale violet vers bleu est si familière qu’on la lit comme un réglage par défaut avant même de lire votre texte. Nul besoin de couleurs exotiques pour y échapper. De petites décisions délibérées suffisent, et elles s’additionnent.

• Choisissez d’abord un fond. Un fond de minuit ou de papier donne l’ambiance plus que le bleu ou le violet, et vous distingue aussitôt du réglage vif par défaut.
• Sortez la lumière de la diagonale. Placez le violet le plus clair dans un coin avec un dégradé radial, au lieu de le faire courir d’un bord à l’autre à 135 degrés.
• Utilisez des arrêts inégaux. Laissez l’indigo tenir 60 % de la surface et le violet seulement le dernier tronçon. Trois parts égales font fabriqué par une machine.
• Ajoutez un accent à un seul endroit. Un filet de rose, de turquoise ou d’or, comme dans la série ci-dessus, se retient bien mieux que les couleurs de base.
• Finissez par du grain. Une fine couche de bruit masque le banding et transforme un dégradé d’écran en surface ; les dégradés granuleux donnent le code.
• Rendez chaque format séparément. La lumière doit tomber au bon endroit sur une story comme sur une bannière, pas là où un recadrage la laisse.

Les noms d’ambiance aident aussi. « Indigo de minuit avec un bord doré » est une décision que vous pouvez répéter toute une année de publications ; « dégradé bleu violet » non.

Le texte sur un dégradé bleu violet

Quand les mots passent de l’extrémité sombre à l’extrémité claire d’un même dégradé, aucune encre ne convient partout. Le texte sur un dégradé présente les options. Dans Gradiently, l’encre Auto s’en charge ligne par ligne, en choisissant une typographie claire ou foncée dans la palette du Mark, si bien qu’un fond bleu violet n’avale jamais un titre.