Heart Potion
#a97fb1
Lilac-leaning mauve for gentle accents and overlays
About Heart Potion
I keep Heart Potion in my back pocket for the moments when a "regular" pink feels a little too sugary. It's lighter than Berries Galore, but unlike the more muted, purple-leaning Amorous it stays visibly pink at a glance. Compared with Dripping Wisteria, it's less damp and plush and more like a clean, hydrated blush with a soft magenta heart. The result is a gentle lift without going candy-bright.
In UI work, I use it for heartfelt states like completed steps, saved confirmations, and onboarding highlights where you want warmth but not the "poster pink" energy. It also shows up in health and wellness apps, creator analytics, and lifestyle media when section headers need attention that feels supportive, not salesy. Pair it with near-whites and cool greys, and you'll get separation fast. I'd still treat it like a medium-intensity accent: too much of it together can start to feel syrupy.
If you need a quick rule, go for it when the design needs approachability with restraint.
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.
