ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/Pastel· Curated

Lavender Macaron

Sweet French patisserie palette featuring gentle pastel lavender, whipped lilac cream, and berry accents.

#Pastel#Food#Creative
Open in Generator
COLOR 1
#F5EEF8
Magnolia White
COLOR 2
#E8DAEF
Heather Mist
COLOR 3
#D2B4DE
Pastel Lavender
COLOR 4
#BB8FCE
Wisteria Pastel
COLOR 5
#8E44AD
Rebecca Purple

Suitable Design Applications

French PatisseriesArtisan ConfectioneryPastel Wedding InvitationsGentle Aromatherapy Brands

Visual Psychology & Mood

Delightful indulgence, floral fragrance, and gentle charm.

Editorial Application Advice

Soft provencal lavender infused with vanilla bean cream and sugar rose. Playful, sweet, and delicately balanced.

Recommended UI Role Architecture

Optimal visual hierarchy assignment for digital product interfaces:

Primary Canvas Background
#FAF7FD
Card & Elevated Surface
#F0E7FA
Primary Brand CTA Accent
#9333EA
Secondary Accent & Focus
#C084FC
Typography & Headings
#3B1261

Color Values & Codes

HEX · RGB · HSL
rgb(245, 238, 248)hsl(282, 42%, 95%)Color details →
rgb(232, 218, 239)hsl(280, 40%, 90%)Color details →
rgb(210, 180, 222)hsl(283, 39%, 79%)Color details →
rgb(187, 143, 206)hsl(282, 39%, 68%)Color details →
rgb(142, 68, 173)hsl(282, 44%, 47%)Color details →

Open In Design Tools

Palette Generator
Lock & shuffle colors
Contrast Checker
Test WCAG compliance
Shades & Tints
Generate tonal steps
Pastel Palettes
Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #F5EEF8;
  --color-2: #E8DAEF;
  --color-3: #D2B4DE;
  --color-4: #BB8FCE;
  --color-5: #8E44AD;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text
#F5EEF8 on #BB8FCE2.33:1
Large Text Only (Fail)
Sample Text
#F5EEF8 on #8E44AD5.16:1
Normal Text AA Pass
Sample Text
#E8DAEF on #BB8FCE1.98:1
Large Text Only (Fail)
Sample Text
#E8DAEF on #8E44AD4.39:1
Large Text Only (Pass)
Sample Text
#D2B4DE on #BB8FCE1.43:1
Large Text Only (Fail)
Sample Text
#D2B4DE on #8E44AD3.16:1
Large Text Only (Pass)

Related Palettes in Pastel

Explore Pastel
#2B0938Copy
#6A0572Copy
#AB2E64Copy
#D85A52Copy
#F9A03FCopy
cp-featured-02Sunset
Malibu Dusk Glow
SunsetGradientCreative
#180F33Copy
#491F79Copy
#7C3AEDCopy
#A78BFACopy
#F5F3FFCopy
cp-featured-05App UI
Fluid iOS Violet
App UICreative
#FFFFFFCopy
#F4F4F5Copy
#A1A1AACopy
#27272ACopy
#E11D48Copy
cp-featured-07Minimal
Swiss Editorial Clean
MinimalCreativeBold
#231612Copy
#48281DCopy
#784534Copy
#B87E60Copy
#E4CEBACopy
cp-featured-09Food
Artisan Espresso Roast
FoodWarmEarthy

Frequently Asked Questions About Lavender Macaron

Production design guidance and accessibility rules for applying the Lavender Macaron (Pastel) color palette.

What is the recommended role hierarchy for the Lavender Macaron palette?
In digital interface design, allocate #F5EEF8 and #8E44AD for structural surface canvas and typography hierarchy (the 60% and 30% layers of the design), while using standout swatches like #E8DAEF or #D2B4DE as your 10% primary action accent for buttons, badges, and interactive highlights.
Are the colors in Lavender Macaron WCAG accessible for web body copy?
Always verify contrast ratios against WCAG 2.2 AA standards (minimum 4.5:1 for regular body copy and 3.0:1 for large text or graphical controls). Consult the Role-Based WCAG Contrast Audit section above to see exact scores for every foreground/background combination in this palette.
How can I export the Lavender Macaron palette to my frontend codebase?
You can copy CSS Custom Properties directly from the CSS Variables code block above, export Tailwind CSS configuration tokens, download a high-resolution PNG card, or open the entire palette inside the interactive Palette Generator to experiment with tints and harmonies.