Magnolia

#fff9e4

Pale gray-gold off-white with lower warmth

Save
Share

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 , and it feels a touch more composed than . Compared to , 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
1.05:1Fail

On Gray 100 #f5f5f5

Aa
1.03:1Fail

On Gray 900 #18181b

Aa
16.81:1AAA

On Black #000000

Aa
19.92:1AAA

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Create a gradient with Magnolia

Open the generator with this color pre-loaded.

Start creating