Mandarin
#f37a48
Drier, lighter Mandarin orange for crisp highlights
About Mandarin
Mandarin looks like the orange you catch on a fresh peel when the light hits it directly, not the kind that leans flame or goes dusty. It sits in the Orange family with a clean, medium-light value and a tighter, more controlled saturation than Bonfire, so it reads purposeful without feeling heavy.
Compared to Melon's smoother, candy-bright play, Mandarin feels a bit more mineral-citrus and less spritzy. And unlike Carrot's extra top-end brightness, it keeps its presence even when the background isn't white. I use it for inline action buttons, status pills, and error-adjacent confirmations where you need clarity without sliding into warning territory. In e-commerce and creator tools, it's my the one you reach for accent when you want hierarchy to hold on real product cards and shopping CTAs.
Pair it with neutral grays or soft warm surfaces. If you put it next to very pink oranges, it can look slightly less friendly, so keep the palette consistent.
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.