Vanilla
#f3e5ab
Warm, creamy green-leaning beige for gentle backgrounds
About Vanilla
Vanilla looks like the pale underside of a vanilla bean pod under warm studio lights. It's creamy, but it doesn't tip into the yellow commitment of Butter Honey or the powdery softness of Sugar Cookie. Compared to Crème de la Crème, it's a touch more saturated and more visibly beige, so it reads as intentional background, not an almost-neutral blur.
I like the one you reach for when you need warmth without turning everything golden. Think food brand packaging mockups, light editorial spreads, and product landing pages where typography should stay crisp. It also holds up well in dashboards and finance apps as a calmer canvas than pure white, especially when paired with dark green, cocoa brown, or charcoal UI chrome. It won't disappear like Crème de la Crème can.
Quirk: set it next to very bright white and it'll feel slightly warmer by comparison, so test your type contrast if your layout leans too minimal.
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.