Buttered Popcorn
#fff0a4
Creamy yellow-green glow for subtle highlights
About Buttered Popcorn
This is the color of movie theater popcorn under warm lights, soft, a little buttery, nothing aggressive about it. It's warmer than pure white without tipping into cream or yellow. You'll recognize it the moment you see it because there's something almost edible about how it sits on screen.
It works in interfaces where you need a gentle background that doesn't fight for attention. Product detail pages, dashboards and analytics tools, form inputs, notification cards, anywhere you're layering information and need the base layer to stay quiet. It's also the go-to for heritage brands, cooking and food sites, and retro-leaning interfaces where you want warm without looking dated.
Pair it with deep charcoal or forest green and it softens immediately. The trick is knowing it'll look warmer on dark backgrounds than on white, so test early if you're using it for critical UI states. It's a color that works harder than it looks.
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.