Lavender Bliss
#cec3dd
Light, dusty lavender for soft focus layouts
About Lavender Bliss
Lavender Bliss reads like a light, gently creamy lilac, not the crisp, paper-bright kind you'd call Digital Lavender. Compared with Girl Crush, it has less mauve punch and fewer "pressed" edges, so it feels more airy than substantial. And unlike Foggy Love, it doesn't blur into soft-focus romance. It stays clean, with a clear lavender identity that leans slightly warmer and more soothing.
I use Lavender Bliss when the UI needs light purple calm that still looks composed behind product photography and interface chrome. Think skincare and wellness dashboards, e-commerce skincare PDP backgrounds, and multi-step onboarding where you want the one you reach for for section banners, empty-state panels, and form progress accents. In SaaS settings, it also plays well for headers in health tracking and lifestyle apps because it looks present without turning smoky or powdery.
Pairing note: cooler whites keep it lavender-first, but if you go too warm (beige or cream), it can drift toward mauve-tinted neutrals fast.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.
