Coconut Agony
#ebe8e7
Warm, muted taupe-gray for grounded, cozy UI
About Coconut Agony
Coconut Agony is what happens when you strip away the intentionality. It's not trying to be cool like Angelic Wings, not leaning into warmth like Alpaca, not threading the needle like Angelic White. It just sits there, a near-invisible gray that's slightly less white than you'd expect, the kind of color you notice only when you're comparing it directly to something brighter.
You'll reach for it in long-form interfaces, documentation sites, and editorial platforms where you need a backdrop that doesn't distract but also doesn't feel sterile. It works behind body copy without the coolness of Angelic Wings, behind photography without the deliberate warmth of Alpaca. Product design, healthcare dashboards, reading-heavy applications. It's the color that works harder than it looks because it's genuinely neutral, not performing coolness, not performing warmth, just getting out of the way.
The thing: it reads slightly muted on screen, which actually works in its favor. It won't shock dark text. It won't fight mid-tone imagery. Pair it with warm blacks or neutral grays and you won't feel any tension. It's the background color you pick when the content matters and the container should disappear completely.
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.