Vanilla Ice
#fdf2d1
Softer, slightly warmer vanilla off-white for airy UI contrasts
About Vanilla Ice
This one looks like a sheet of vanilla frosting under office lighting. Vanilla Ice sits at the same "very near white" distance as the creams around it, but it reads cooler and cleaner than Satin Cream White, so it feels less yellow-wall and more like a controlled highlight.
Compared to Hazelwood, it loses the deeper yellow intent and comes off more neutral, not friendly-rich. Compared to Hint of Yellow, it's paler and less sunny, so it doesn't create that soft highlight edge behind text. I use it when I want a quiet backdrop that stays readable next to gray UI copy without getting beige. It works hard in dashboards and finance apps for panel backgrounds, empty-state cards, and form surfaces where product photos or charts still need to own the attention.
Pair it with slightly cooler grays or neutral whites if you want it to hold its crispness; with warm palettes it can start to feel more washed out than planned.
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.