Mai Tai
#a56531
Softer honey-caramel brown, warmer than Eagle
About Mai Tai
Mai Tai reads like a ripe mango skin that's been kissed with brown sugar. It's warm, mid-light, and noticeably more saturated than the coppery yellows in this set, but it doesn't go as deep or dusty as Eagle. Compared to Frappé au Chocolat, it keeps that golden lift instead of sliding toward cocoa foam. And next to Gingerbread Crumble, it feels cleaner and more sunlit, with less crusty, red-brown comfort.
In UI, I use it when I want a yellow-brown accent that still feels "product" and not neutral. Think beverage labels, bakery and hospitality promo banners, and the little highlight bars on menus where you want warmth to pop without turning into a soft tan. It's also handy for e-commerce pricing chips and onboarding illustrations when you need that friendly golden glow.
Pair it with cream whites or light sand. If you put it beside cooler gray browns, the color can flatten fast. Keep it in layouts with at least one warm anchor so the mango-sugar character stays present.
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.