Sunny Yellow
#fff917
Sunny, lighter than Lemon; softer than neon
About Sunny Yellow
On my screen, Sunny Yellow feels like a sheet of sunlight laid over warm gray tiles. It's bright, but it doesn't carry that sharp, lemon-clean edge, and it's not the gold-coin heat of Banana King. Compared with those nearby yellows, this one lands warmer than pale highlights while staying notably light, so it reads "notice me" without looking like an alert.
I reach for it when the UI needs a cheery lift that still behaves like a background accent: e-commerce category chips, product badges, onboarding progress cues, and the small state labels you see in dashboards and finance apps. It also works in illustration-heavy hero sections where you want sunlight energy without fighting the main copy. Use it with warm grays for a smooth stack, or with cooler neutrals if you want it to glow a little harder.
One quirk: next to Banana King, it looks less saturated and less personality-forward, so don't mix them in the same component row unless you're intentionally controlling hierarchy.
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.