Peppy Pineapple
#ffff44
Pale butter yellow-green that lifts gray
About Peppy Pineapple
On a light canvas, Peppy Pineapple reads like a cheerful yellow that stayed in the sun a little too long, but without turning harsh. It's noticeably deeper and more saturated than the ultralight daffodil, yet it doesn't have Big Yellow Taxi's punchy confidence. Compared to Giraffe, it feels more "noticed" and less almost-neutral, with a cleaner, warmer undertone that keeps it from going flat.
I use it when the interface needs an immediate lift without screaming. Think product pages for retail and CPG, hero sections on marketing sites, and callouts in web apps where you want attention for the next step. It also shows up well in admin-heavy workflows like logistics tracking and media management previews, where the highlight has to stay readable against gray without looking dusty.
Caution: if you drop it next to Butter-warm yellows, it can start to look a bit sharper and more deliberate. Pair it with fresh cool grays or charcoal accents so it stays crisp instead of turning chalky.
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.
