Banana
#fffc79
Pale yellow-cream with soft, warmer neutrality
About Banana
Banana sits in a weird pocket where it's almost too soft to command attention but too yellow to disappear. It's the lightest in this cluster, which means it reads less like a deliberate highlight and more like something the background actually wanted to be. There's still yellow in there, you're not looking at cream, but it's muted enough that it doesn't broadcast itself the way Canary or even Butter does.
You'll see it working best on long-form reading interfaces, dashboard backgrounds, and design systems where you need warmth without presence. It settles into product tools and documentation sites where users are staring at the screen for hours. Financial apps that want approachable without the energy. The kind of color that works harder than it looks because it's doing the job without announcing it. It pairs cleanly with dark text and holds imagery without strain.
The trade-off: against cool grays, it flattens slightly, loses definition in a way that Butter doesn't. Keep it warm and it vanishes into the family. That's either exactly what you need or a sign you should have picked something with more backbone.
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.