Mandarin

#f37a48

Drier, lighter Mandarin orange for crisp highlights

Save
Share

About Mandarin

Mandarin looks like the 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 family with a clean, medium-light value and a tighter, more controlled saturation than , so it reads purposeful without feeling heavy.

Compared to 's smoother, candy-bright play, Mandarin feels a bit more mineral-citrus and less spritzy. And unlike '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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
2.73:1Fail

On Gray 100 #f5f5f5

Aa
2.51:1Fail

On Gray 900 #18181b

Aa
6.49:1AAAAA Large

On Black #000000

Aa
7.69:1AAA

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Mandarin

Open the generator with this color pre-loaded.

Start creating