Sweetheart
#f3c3d8
Soft bubblegum rose for gentle, airy accents
About Sweetheart
Sweetheart reads like a pale, candy-rose smear that's already been softened by daylight. It's clearly pink, but it doesn't float as airy as Cherry Blossom, and it doesn't skew more peachy like Guava Glow. Compared to LA Vibes, it feels a touch more lifted and even, less dusk-misted and more straightforwardly rosy.
I use Sweetheart for UI moments that need comfort without turning into a blushy whisper. It's great for skincare onboarding, wellness cards, and beauty app secondary actions where you want that "friendly red-family" warmth. Think quiet highlights, chip backgrounds, and gentle pressed/hover states on mobile screens. If you're building soft packaging mockups, it also holds up better than the lighter neighbors when you want the pink to show up as a choice, not a tint.
Quick heads-up: on very light creams it can look slightly washed, so pair it with warmer neutrals or deepen with a richer red or berry for contrast.
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.