Hipster Hippo
#bfb3ab
Dusty cool taupe-gray for pared-back editorial grids
About Hipster Hippo
Put this color under a kitchen light or a bright office LED and you'll notice it doesn't go either way into beige like Couch Potato, or into that tight, cool stone feel of Grey Marble. Hipster Hippo reads more taupe-leaning gray, with a slightly dusty, fashion-editorial mood.
At #bfb3ab it sits on the lighter side of the set, but it's not washed out. I use it for UI surfaces where the page needs soft structure without feeling cushy. Think design systems for consumer platforms, onboarding screens, and marketing sites for lifestyle brands. It also behaves well in media-heavy views like editorial previews and gallery controls where you want backgrounds to stay out of the way while still looking intentional.
If you swap it for Grey Marble, the difference is immediate: this one is gentler and more willing to hold warmth. I'd pair it with charcoal text and low-saturation accents, or it can start to look a bit flat next to crisper grays.
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.
