Belgian Waffle

#f3dfb6

Belgian-waffle yellow-green for crisp cards, less buttery

Save
Share

About Belgian Waffle

Belgian Waffle sits right in the middle of the warmth spectrum, but it doesn't broadcast it the way does. There's yellow in the hex, sure, but it's softer and less saturated than either of its neighbors, closer to Cloud of 's restraint than 's deliberate glow. It's the one I reach for when I need warmth that doesn't demand attention.

You'll land on it for interfaces, editorial sites, and light backgrounds where a pure feels too cool but 's assertiveness overshoots the brief. Food apps, publishing platforms, SaaS dashboards with warm-leaning brands, this color works because it suggests intention without forcing it. Against charcoal type or deep accents, it reads as chosen, grounded, purposeful.

The thing: it's darker than , which means next to true white it won't disappear the same way. But it's also less yellow than , so it won't fight with cooler typography or imagery. It's the middle ground that actually earns its place instead of playing it safe.

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.31:1Fail

On Gray 100 #f5f5f5

Aa
1.20:1Fail

On Gray 900 #18181b

Aa
13.53:1AAA

On Black #000000

Aa
16.04: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.

Similar colors

#f4e0bb
#eee0b9
#f8deb8
#f2debc

Create a gradient with Belgian Waffle

Open the generator with this color pre-loaded.

Start creating