Magnolia
#fff9e4
Pale gray-gold off-white with lower warmth
About Magnolia
On my screen, Magnolia reads like a milky paper held up to daylight. It's warmer than the near-white Grays, but it doesn't go yellow like Cornsilk, and it feels a touch more composed than Down Feathers. Compared to Buttermelon, the yellow is muted so the warmth stays soft instead of leaning "sunny." The result is an off-white that looks intentional without looking lived-in.
I use Magnolia when the page needs a gentle glow for SaaS dashboards and settings screens, plus editorial spaces where you still want contrast control with light type or photography. It plays nicely in product marketing and e-commerce too, especially for hero sections where you want the background to support skin tones and warm materials. It's warmer than pure white, but it won't tip into the more noticeable yellow territory of its neighbors.
Quick note: if you pair it with very cool grays, it can feel slightly more formal. Pair it with softer creams and you get that the one you reach for consistency across a whole layout system.
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.