About Toupe
I keep spotting Toupe in mockups where the tan should be present, but not loud. At a glance it reads soft and dusty, more beige-mushroom than gold or tea. Compared with Pony, it's less gold-leaning and less "shelf label" warm. Next to Gold Rush it loses that polished, richer midtone bite. And against Croissant it sits a touch deeper and more deliberate, so it doesn't fade away as easily.
For UI, Toupe is my go-to calm panel tint when I want a green-heavy layout to feel grounded instead of dusty. It works well as card backgrounds and section headers in logistics portals, media CMS templates, and fintech reporting views where the UI needs warmth without tipping into yellow-brass. It's also handy for status surfaces that should look composed, not promotional, which is why it's the one you reach for when you want consistency across many rows.
Quirk: because the undertone is slightly muted, it can look flatter beside very cool grays, so I nudge borders or shadows a bit warmer to keep the depth.
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.
