Goldilocks
#fff39a
Balanced light gold-gray warmth for airy layouts
About Goldilocks
Goldilocks splits the difference in a way that actually works. It's lighter than Firefly Glow but with more presence than Banan-Appeal, saturated enough to feel chosen, pale enough that it won't overpower what sits on top of it. This is the shade that doesn't make you second-guess yourself.
Reach for it on dashboards, SaaS interfaces, editorial sites, and financial apps where you need a warm canvas that reads as intentional without becoming a design decision that demands explanation. It sits behind body text without that washed-out feeling. Works as a form field background or button surface. Holds its ground against cooler grays without pushing forward the way Firefly Glow does, and it's got enough backbone to actually anchor a layout, unlike Banan-Appeal, which needs backup to stay steady.
The real win: it plays well in mixed-temperature palettes. Pair it with cool grays and it stays warm but grounded. It's not apologizing for existing, and it's not trying too hard. That's the kind of color that earns its place because it does the job without overthinking it.
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.