L’essentiel en bref
- Un dégradé violet mêle des nuances de violet, de pourpre, de prune ou de lavande, souvent avec un bleu ou un rose voisins.
- Le violet est souvent associé à la créativité, au luxe et à l’imagination, et il est devenu une couleur très courante dans l’identité des marques tech.
- Les violets profonds comme #4c1d95 portent confortablement un texte blanc, alors que les lavandes claires demandent un texte sombre.
- Les violets moyens comme #a78bfa sont les plus difficiles pour le texte : trop clairs pour un texte blanc, trop saturés pour paraître calmes sous du noir.
- Ajouter de la chaleur, de la profondeur ou du grain est le moyen le plus rapide d’éviter qu’un dégradé violet ressemble à un préréglage par défaut.
Sur cette page
Un dégradé violet mêle des nuances de violet, de pourpre, de prune ou de lavande, souvent avec un bleu ou un rose voisins. C’est l’une des couleurs de dégradé les plus populaires pour les sites, les applications et les posts, car le violet évoque l’imagination et un peu le luxe, et il rayonne magnifiquement sur un écran sombre. Voici des palettes de dégradés violets classées par ambiance, chacune avec son CSS à copier, puis comment y poser du texte et comment éviter qu’elles ressemblent à celles de tout le monde.
La famille des violets : violet, pourpre, prune et lavande
« Violet » couvre un large éventail. Le violet bleuté paraît froid et électrique. Le magenta tire vers le rose et paraît chaud et bruyant. La prune est un pourpre profond et rougeâtre qui paraît riche ; la lavande est un violet pâle et grisé qui paraît doux. Savoir lequel vous voulez facilite tous les autres choix.
Ce qu’évoque un dégradé violet
Dans une grande partie de l’Europe et des Amériques, le violet est associé à la créativité, à l’imagination et au luxe. Le lien avec le luxe est historique : pendant des siècles, la teinture pourpre était rare et coûteuse, et donc portée par les puissants. Ces dernières années, il est aussi devenu l’une des couleurs les plus courantes dans l’identité des logiciels et des marques tech, où il suggère l’inventivité sans le sérieux du bleu. Les associations diffèrent ailleurs ; la signification des couleurs dans le monde donne les détails.
- Outils créatifs et studios : le violet et le magenta paraissent inventifs et un peu joueurs.
- Beauté et bien-être : les lavandes et les lilas paraissent doux et réparateurs.
- Musique, vie nocturne et jeu vidéo : des violets profonds avec une lueur vive évoquent le soir.
- Produits haut de gamme : la prune et l’améthyste presque noire paraissent riches, surtout avec une lumière chaude.
La contrepartie, c’est le déjà-vu. Comme tant de marques tech utilisent un dégradé violet, le vôtre doit gagner sa différence par la profondeur, la chaleur, la matière ou la constance de son usage.
Dégradés violets sombres
Les dégradés violets sombres paraissent riches et nocturnes. Ils conviennent à la musique, à la vie nocturne, aux produits haut de gamme et à tout ce qui doit évoquer le soir. Gardez l’arrêt le plus sombre proche du noir et laissez une seule couleur lumineuse en surgir.
Dégradés violets clairs et pastel
Les violets pâles paraissent calmes, doux et un peu rêveurs. Ils conviennent au bien-être, à la beauté, à la papeterie et à tout ce qui doit paraître doux. Ils demandent un texte sombre, et sont plus beaux avec une pointe de chaleur ou de bleu pour ne pas ressembler à un lilas gris et plat.
Dégradés violets éclatants
Les violets éclatants sont les plus bruyants et les plus courants. Utilisez-les pour les lancements, le jeu vidéo, les événements et les marques audacieuses, et tenez-les à l’écart des longues lectures. Fondre le violet vers le rose ou l’orange garde le milieu lumineux ; le fondre vers le vert le fait virer au gris.
Du texte sur des dégradés violets
Le violet est facile à rater pour le texte, car les violets moyens sont mal placés : trop clairs pour un texte blanc, trop sombres et saturés pour que le noir paraisse calme. Choisissez l’encre selon l’endroit où se trouve réellement le texte.
| Texte sur fond | Contraste | Verdict |
|---|---|---|
Blanc sur #2e1065 | 15,2:1 | Excellent pour tout texte |
Blanc sur #4c1d95 | 11,0:1 | Excellent |
Blanc sur #7c3aed | 5,7:1 | Bien pour le texte courant et les grands textes |
Blanc sur #a78bfa | 2,7:1 | Échoue, même pour les grands textes |
#1e1033 sur #a78bfa | 6,6:1 | Une encre sombre fonctionne ici |
#1e1033 sur #ede9fe | 15,0:1 | Excellent |
Sur un dégradé, vérifiez le point le plus clair derrière un texte blanc et le point le plus sombre derrière un texte sombre. Le texte sur un dégradé traite du placement, et le contraste des couleurs explique les ratios.
Sombre et riche : une pochette adaptée à l’écoute du soir.
Doux et clair : un post tout en douceur avec une encre sombre.
Comment éviter qu’un dégradé violet paraisse générique
Le violet vers rose à 135 degrés est l’un des dégradés les plus utilisés au monde. Il est séduisant, mais il ne dit plus rien de celui qui l’utilise. Quatre petits changements aident.
- Approfondissez-le. Partez d’un violet presque noir plutôt que d’un violet moyen. La profondeur se lit comme haut de gamme.
- Réchauffez-le. Ajoutez une lumière pêche, abricot ou dorée à une extrémité. Un violet avec une lumière chaude évoque le crépuscule plutôt qu’un logiciel.
- Changez la forme. Une lueur radiale basse ou une chute verticale ressemble davantage à de la lumière qu’un remplissage en diagonale. Voyez les dégradés radiaux.
- Ajoutez une matière. Un grain fin ou un léger lustre transforme un fondu plat en surface. Voyez les dégradés granuleux.
.hero {
background-color: #1a0b2e;
background-image:
radial-gradient(circle at 75% 110%, #fdba74 0%, transparent 35%),
linear-gradient(in oklch 170deg, #0f0a1f 0%, #3b1a6e 55%, #7c3aed 100%);
}Si le violet est la couleur de votre marque, la constance compte plus que le fondu exact. L’identité de marque en dégradé explique comment faire d’un violet le vôtre. Vous pouvez aussi chercher « deep violet » ou « lavender » dans le Marché de Gradiently pour voir des Marks violets vivants.
Les questions qu’on nous pose
Quelles couleurs vont bien avec le violet dans un dégradé ?
Le bleu, le rose, le magenta et des lumières chaudes comme la pêche ou l’or se fondent proprement avec le violet. Le vert et le jaune lui sont opposés et ont tendance à virer au gris au milieu d’un dégradé.
Quel est le code CSS d’un dégradé violet ?
Par exemple, linear-gradient(160deg, #0f0a1f 0%, #2e1065 55%, #6d28d9 100%) donne un dégradé améthyste profond. Chaque exemple de cette page peut être copié directement.
Quelle couleur de texte sur un dégradé violet ?
Le blanc fonctionne sur les violets profonds et moyennement sombres, et une encre violette presque noire sur les violets clairs et moyens. Vérifiez le contraste là où le dégradé est le plus clair derrière un texte blanc.
Qu’évoque un dégradé violet ?
Le violet est souvent associé à la créativité, à l’imagination et au luxe. Il est aussi très courant dans l’identité des marques tech, ce qui le rend familier mais plus difficile pour se démarquer.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
