pastelmonochromecool
Lilac Dream Color Palette
Lilac Dream is a pastel, monochrome and cool color palette of 5 colors: Lavender (#f3e8ff), Lavender (#e9d5ff), Mauve (#d8b4fe), Heliotrope (#c084fc) and Blue Violet (#9333ea). Its dominant hue is purple.
The darkest color, Blue Violet, on the lightest, Lavender, gives a 4.56:1 contrast ratio — enough for body text at WCAG AA. 1 pair in this palette passes AA for normal text. Blue Violet (#9333ea) is its most saturated color and a natural choice for buttons and links.
Colors
- Lavender
- Lavender
- Mauve
- Heliotrope
- Blue Violet
CSS Output
:root {
--lilac-dream-1: #f3e8ff;
--lilac-dream-2: #e9d5ff;
--lilac-dream-3: #d8b4fe;
--lilac-dream-4: #c084fc;
--lilac-dream-5: #9333ea;
}Lilac Dream on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Blue Violet on Lavender#9333ea on #f3e8ff4.56:1AA
- Blue Violet on Lavender#9333ea on #e9d5ff3.95:1AA Large
- Blue Violet on Mauve#9333ea on #d8b4fe3.04:1AA Large