Banana Cream

#fff49c

Pale banana-gold warmth sits softer than Butter

Save
Share

About Banana Cream

Banana sits between its siblings without the identity crisis. It's noticeably more saturated than , with enough yellow backbone to actually hold a layout, but nowhere near the commitment that makes. Think of it as the middle child that actually works, warm enough to feel intentional, pale enough to not demand all the attention.

You'll land it on product pages, SaaS interfaces, and editorial sites where you need warmth that doesn't compete with content. It handles form fields and button backgrounds without that sterile feeling, works behind body text without the heaviness of , and doesn't disappear the way does. Design tool canvases, financial dashboards, e-commerce sites that want approachable, this is the shade that does the job without overthinking it.

The quirk: it's more forgiving in mixed-temperature palettes than is. Pair it with cooler grays and the yellow reads as steady, not dated. It's got enough presence to anchor without enough attitude to clash. That balance is what makes it useful.

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

On Gray 100 #f5f5f5

Aa
1.03:1Fail

On Gray 900 #18181b

Aa
15.75:1AAA

On Black #000000

Aa
18.67: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

Create a gradient with Banana Cream

Open the generator with this color pre-loaded.

Start creating