# Dégradé lavande : codes de violet doux [Canonical HTML page](https://gradiently.design/fr/guide/lavender-gradient) La lavande, c’est du violet dont on a baissé le volume : calme, un peu rêveuse, jamais criarde. Le plus dur est de la garder douce sans qu’elle vire au gris ou au sucré. Ces codes y arrivent. ## The short version - Un dégradé lavande fond des violets pâles, légèrement bleutés, souvent avec du blanc, du rose poudré, de la pêche ou un bleu doux. - La lavande vire au gris quand ses arrêts sont trop désaturés, et au sucré quand chaque arrêt est un rose et un violet pastel. - Un partenaire chaud comme la pêche ou le beurre, ou un vert froid comme la sauge, donne du caractère à la lavande. - Le texte blanc ne se lit pas sur une lavande pâle ; une prune profonde comme #2e1065, si. - La lavande convient au bien-être, au sommeil, aux mariages, à la beauté et aux produits numériques apaisants. Un **dégradé lavande** fond des violets pâles aux reflets bleus, en général de presque blanc à un lilas doux ou un bleu pervenche. Il paraît calme, léger et un peu rêveur, ce qui fait aimer la lavande aux marques de bien-être, de sommeil, de beauté et de mariage. Deux écueils : retirez trop de couleur et elle devient grise et poussiéreuse, ajoutez trop de rose et elle devient sucrée. Gardez un arrêt nettement coloré, associez-la à un partenaire chaud ou vert, et composez vos mots en prune profonde. ## Lavande, lilas, pervenche et mauve Les violets doux ont plusieurs noms, et chacun penche d’un côté. Savoir lequel vous voulez facilite le fondu : la lavande et la pervenche penchent vers le bleu, le lilas et le mauve vers le rose. - Brume de lavande: #f5f3ff - Lavande: #e6e0f8 - Violet doux: #ddd6fe - Lilas: #c4b5fd - Pervenche: #c7d2fe - Orchidée: #d8b4e2 - Mauve: #b497bd - Encre prune: #2e1065 La famille des violets doux et une prune profonde pour le texte. La lavande et la pervenche sont plus froides ; l’orchidée et le mauve plus chauds. ## Dégradés lavande pâles Ce sont les discrets, les plus proches du blanc, pour des fonds qui portent beaucoup de texte : la carte d’un salon de thé, une newsletter, les écrans d’accueil d’une appli. Ils s’effacent presque, à employer là où le contenu est l’essentiel. - Brume de lavande: `linear-gradient(180deg, #faf9ff 0%, #e6e0f8 100%)` - Violet doux: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 100%)` - Voile pervenche: `linear-gradient(135deg, #eef2ff 0%, #e6e0f8 50%, #f5f3ff 100%)` - Lumière lilas: `radial-gradient(circle at 70% 25%, #ddd6fe 0%, #f5f3ff 55%, #ffffff 100%)` Des lavandes presque blanches. Chacune garde un arrêt vraiment coloré pour ne jamais paraître grise. ## Dégradés lilas et pervenche Un cran plus profond, la lavande devient une vraie couleur plutôt qu’une teinte. Du lilas à la pervenche donne un fondu frais et moderne, beau sur écran de téléphone ; du lilas à l’orchidée est plus chaud et plus romantique. Gardez les deux extrémités à une clarté voisine et le fondu reste lisse. - Du lilas à la pervenche: `linear-gradient(135deg, #c4b5fd 0%, #a5b4fc 100%)` - Du lilas à l’orchidée: `linear-gradient(135deg, #ddd6fe 0%, #d8b4e2 100%)` - Lilas crépusculaire: `linear-gradient(160deg, #e0e7ff 0%, #c4b5fd 50%, #a78bfa 100%)` - Bleu layette vers lilas: `linear-gradient(90deg, #bfdbfe 0%, #c4b5fd 100%)` Des lavandes moyennes. Celles qui penchent vers le bleu paraissent numériques et calmes ; celles qui penchent vers le rose, romantiques. ## Lavande avec pêche, beurre ou sauge Seule, la lavande peut paraître trop sucrée. Un partenaire hors de la famille des violets y remédie. La pêche et le beurre apportent de la chaleur et font de la lavande une lumière de début de soirée. La sauge ajoute une note adulte et botanique, d’où le succès de l’association lavande et sauge pour les mariages. À ces teintes pâles, les couleurs opposées se fondent sans boue, car il y a peu de saturation à perdre. [Les dégradés pastel](https://gradiently.design/fr/guide/pastel-gradients) étendent ce principe à tout le cercle. - Lavande et pêche: `linear-gradient(135deg, #ddd6fe 0%, #fde2cf 100%)` - Lavande et beurre: `linear-gradient(135deg, #e6e0f8 0%, #fef3c7 100%)` - Lavande et sauge: `linear-gradient(135deg, #e6e0f8 0%, #dbe5d4 100%)` - Ciel du soir: `linear-gradient(180deg, #c7d2fe 0%, #ddd6fe 45%, #fbcfe8 100%)` La lavande avec un partenaire. Chacune paraît moins sucrée et plus proche d’un vrai lieu ou d’un moment de la journée. ## Dégradés lavande crépusculaires Faire descendre la lavande vers le violet ou la prune donne le crépuscule : encore douce en haut, riche en bas. Cela convient aux applis de sommeil, aux marques de bougies, au yoga du soir, au parfum et aux librairies. L’extrémité profonde offre aussi au texte blanc un endroit où se poser. Pour toute la gamme des violets plus francs, voir [les dégradés violets](https://gradiently.design/fr/guide/purple-gradient). - Crépuscule: `linear-gradient(180deg, #e6e0f8 0%, #a78bfa 50%, #4c1d95 100%)` - Heure du coucher: `linear-gradient(180deg, #ddd6fe 0%, #8b5cf6 55%, #2e1065 100%)` - Crépuscule mauve: `radial-gradient(circle at 50% 20%, #ede9fe 0%, #b497bd 40%, #4a2e5c 100%)` Lavande en haut, prune en bas. Mettez les titres dans la moitié basse en blanc, ou dans la moitié haute en prune. ## Des idées de dégradé lavande à publier cette semaine On choisit souvent la lavande parce qu’elle plaît, puis on l’emploie sans plan. Voici des cas précis où elle aide vraiment : - **Une appli de sommeil ou de méditation :** « Heure du coucher » en fond d’accueil, texte prune en haut, bouton dans la zone violet profond. - **Un post de fleuriste pour la fête des mères en 1080×1350 :** « Lavande et pêche » avec une seule ligne : « Commandes jusqu’à jeudi. » - **Un lancement de soin de la peau :** « Brume de lavande » derrière les photos produit, pour que l’emballage porte la couleur. - **Une bannière LinkedIn de thérapeute ou de coach en 1584×396 :** « Voile pervenche » paraît calme et professionnel, sans la froideur du bleu corporate. - **Une liste de tarifs de spa en affiche A4 :** « Lavande et sauge » avec un texte aubergine, lisible depuis l’autre bout d’une réception. ## Éviter la lavande grise ou sucrée ### Vire au gris ou au sucré - Tous les arrêts désaturés, comme `#e2e0e6` - Lavande à côté d’un gris froid - Lavande, rose bébé et violet en même temps - Texte blanc sur un lilas pâle ### Reste douce et nette - Au moins un arrêt de couleur franche, comme `#c4b5fd` - Lavande à côté d’un blanc chaud ou d’une crème - Un seul partenaire : pêche, beurre ou sauge - Texte prune profond sur les zones pâles Un test utile : posez une pastille de gris pur à côté de votre lavande. Si vous avez du mal à les distinguer d’un coup d’œil, montez la couleur d’un cran. Vérifiez aussi sur un téléphone à faible luminosité, où les teintes très pâles se perdent facilement. ## Du texte sur un dégradé lavande La lavande est très claire : le texte blanc échoue sur presque toute sa surface. Du blanc sur lilas `#c4b5fd` mesure moins de 2 pour 1. Une prune profonde `#2e1065` sur le même lilas dépasse 8 pour 1 et garde le texte dans la famille des violets, loin de la dureté du noir. Pour un rendu plus doux sur les lavandes les plus pâles, une aubergine sourde comme `#3b2f4a` passe encore sans peine. [Contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) donne les détails. Une invitation de mariage « réservez la date » avec un texte prune profond sur un dégradé lavande pâle et pêche Une invitation de 5×7 pouces à 300 dpi, en lavande pâle avec un texte prune. Le même design « réservez la date » en story verticale pour téléphone sur le dégradé lavande Le même design en story pour annoncer la nouvelle, rendu à sa propre taille. Avec Pro, Gradiently peut porter ce même design de l’impression à tous les formats sociaux en une seule étape : le Mark est recalculé à chaque format, et l’encre Auto choisit un texte clair ou foncé par ligne d’après la palette du Mark. Pour le côté papeterie, voir [les palettes de couleurs de mariage](https://gradiently.design/fr/guide/wedding-color-palettes). ## CSS de dégradé lavande Par défaut, les navigateurs mélangent les couleurs d’un dégradé en sRGB, ce qui peut ternir le milieu d’un fondu entre deux teintes. Interpoler en OKLCH garde le point médian net, et un repli en hex couvre les navigateurs qui ne le gèrent pas. Voir [les dégradés CSS en OKLCH](https://gradiently.design/fr/guide/css-gradient-oklch) pour la prise en charge. ```css .card-lavender { background: linear-gradient(135deg, #f5f3ff, #ddd6fe, #fde2cf); color: #2e1065; } @supports (background: linear-gradient(in oklch, red, blue)) { .card-lavender { background: linear-gradient(in oklch 135deg, #f5f3ff, #ddd6fe, #fde2cf); } } ``` Brume de lavande vers violet doux vers pêche, avec texte prune. La version OKLCH garde le fondu lumineux au milieu. ## FAQ ### Quel est le code hex de la lavande ? La couleur CSS nommée `lavender` vaut `#e6e6fa`, un violet bleuté très pâle. Beaucoup de designers emploient des versions un peu plus riches comme `#e6e0f8` ou `#ddd6fe`. ### Quelles couleurs vont bien avec un dégradé lavande ? La pêche, le jaune beurre, le vert sauge, la crème et le bleu doux. Une prune profonde convient bien au texte. ### Pourquoi mon dégradé lavande paraît-il gris ? Les arrêts sont trop désaturés ou voisinent un gris froid. Donnez au moins un arrêt une couleur franche et associez-le à un blanc chaud plutôt qu’à un gris. ### Quelle différence entre lavande et lilas ? La lavande penche un peu vers le bleu et reste en général plus pâle ; le lilas penche un peu vers le rose et se montre un peu plus fort. ### Quelle couleur de texte sur la lavande ? Une prune ou une aubergine profonde, comme `#2e1065`. Le texte blanc échoue au contraste sur une lavande pâle.