The short version
- A lavender gradient blends pale, slightly blue purples, often with white, blush, peach or a soft blue.
- Lavender turns grey when its stops are too desaturated, and it turns sugary when every stop is pastel pink and violet.
- A warm partner such as peach or butter, or a cool green such as sage, gives lavender character.
- White text does not read on pale lavender; a deep plum such as #2e1065 does.
- Lavender suits wellness, sleep, weddings, beauty and calm digital products.
On this page
A lavender gradient blends pale, softly blue purples, usually from almost white to a gentle lilac or periwinkle. It feels calm, light and a little dreamy, which is why wellness, sleep, beauty and wedding brands love it. Two things go wrong with it: drain too much colour and it turns dusty grey, add too much pink and it turns sugary. Keep one stop clearly coloured, pair it with a warm or green partner, and set your words in deep plum.
Lavender, lilac, periwinkle and mauve
Soft purples have several names, and each leans a different way. Knowing which you want makes blending easier: lavender and periwinkle lean blue, lilac and mauve lean pink.
Pale lavender gradients
These are the quiet ones, closest to white, for backgrounds that hold a lot of text: menus for a tea room, a newsletter, an app's onboarding screens. They are barely there, so use them where the content is the point.
Lilac and periwinkle gradients
A step deeper, lavender becomes a clear colour rather than a tint. Lilac to periwinkle gives you a cool, modern blend that looks good on phone screens; lilac to orchid is warmer and more romantic. Keep both ends at a similar lightness and the blend stays smooth.
Lavender with peach, butter or sage
On its own, lavender can feel too sweet. A partner from outside the purple family fixes that. Peach and butter add warmth and make lavender feel like early evening light. Sage adds something grown up and botanical, which is why lavender and sage is such a popular wedding pairing. At these pale tints opposite colours blend without turning muddy, because there is little saturation to lose. Pastel gradients covers that principle across the whole wheel.
Dusky lavender gradients
Running lavender down into violet or plum gives you dusk: still soft at the top, rich at the bottom. These work for sleep apps, candle brands, evening yoga, perfume and bookshops. The deep end also gives white text somewhere to sit. For the full range of bolder purples, see purple gradients.
Lavender gradient ideas you can post this week
Lavender is often chosen because it feels nice, then used with no plan. These are specific pieces where it genuinely helps:
- A sleep or meditation app: "Bedtime" as the onboarding background, plum text at the top, the button in the deep violet area.
- A florist's Mother's Day post at 1080×1350: "Lavender and peach" with one line, "Orders close Thursday."
- A skincare launch: "Lavender mist" behind product photos, so the packaging carries the colour.
- A therapist's or coach's LinkedIn banner at 1584×396: "Periwinkle wash" reads calm and professional without the coldness of corporate blue.
- A spa price list on an A4 poster: "Lavender and sage" with aubergine type, readable from across a reception desk.
Avoiding grey and sugary lavender
Turns grey or sugary
- Every stop desaturated, like
#e2e0e6 - Lavender beside cool grey
- Lavender, baby pink and violet all at once
- White text on a pale lilac
Stays soft and clear
- At least one stop with clear colour, like
#c4b5fd - Lavender beside warm white or cream
- One partner: peach, butter or sage
- Deep plum text across the pale areas
A useful check: put a pure grey swatch next to your lavender. If you struggle to tell them apart at a glance, push the colour up a notch. Check on a phone at low brightness too, where very pale tints are easy to lose.
Text on a lavender gradient
Lavender is very light, so white type fails on almost all of it: white on lilac #c4b5fd measures under 2 to 1. Deep plum #2e1065 on the same lilac measures above 8 to 1, and it keeps the text inside the purple family instead of the harshness of black. For a softer look on the palest lavenders, a muted aubergine like #3b2f4a still passes comfortably. Colour contrast and accessibility has the details.
A 5×7 inch invitation at 300 dpi, in pale lavender with plum type.
The same design as a story for sharing the news, rendered at its own size.
With Pro, Gradiently can carry that one design from print to every social size in one step: the Mark renders fresh in each format, and Auto ink chooses light or dark type per line from the Mark's own palette. For more on the stationery side, see wedding colour palettes.
Lavender gradient CSS
By default browsers mix gradient colours in sRGB, which can dull the middle of a blend between two hues. Interpolating in OKLCH keeps the midpoint clean, and a hex fallback covers browsers without it. See CSS gradients in OKLCH for support.
.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);
}
}Questions people ask
What is the hex code for lavender?
The CSS named colour lavender is #e6e6fa, a very pale blue purple. Many designers use slightly richer versions such as #e6e0f8 or #ddd6fe.
What colours go well with a lavender gradient?
Peach, butter yellow, sage green, cream and soft blue. A deep plum works well for text.
Why does my lavender gradient look grey?
The stops are too desaturated or sit next to cool grey. Give at least one stop clear colour and pair it with warm white instead of grey.
What is the difference between lavender and lilac?
Lavender leans slightly blue and is usually paler; lilac leans slightly pink and is a little stronger.
What text colour goes on lavender?
Deep plum or aubergine, such as #2e1065. White text fails contrast on pale lavender.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile