Vanilla Sugar
#f1e8dc
Creamy warm gray for soft panels, not moonlit
About Vanilla Sugar
I see Vanilla Sugar as that soft, dusty-off-white you get when bakery steam hits light paper. It's warmer than pure white, but the warmth is pale and controlled, not toasted. Compared to A Smell of Bakery, it feels less like an active background choice and more like a calm base coat that never grabs the cursor. And next to Refer to the Stars, it reads more creamy than gray, with a gentler undertone that doesn't stay as cool and subdued.
I tend to use it for dashboards, SaaS settings, and editorial publishing where you want the page to feel cared for without fighting the type. It's a strong background for product tables, pricing screens, and documentation sites, especially when you have photography that needs skin tones or warm scenes to look natural.
Pair it with deeper warm blacks or mid grays to keep it cohesive. If your typography is too cool, this shade can start to look a touch flat against it.
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.