Mandarin Orange
A bold, energetic mandarin orange hue
Mandarin Orange is a saturated, high-energy hue that demands immediate attention. Due to its intensity, this shade works best as an accent or a call to action button rather than a primary background color. Black text provides excellent readability against the hex code #ec6a37, meeting WCAG standards easily. Pair it with deep charcoals or cool teals to ground its aggressive warmth in your design.
About Mandarin Orange
Terracotta pot left out in the noon sun
What does mandarin orange mean?
It commonly signals warmth, appetite, and energy, and it often appears in autumn harvest imagery, citrus fruit, and warning signage. Its strong saturation and mid-level lightness make it feel bold and beaming without the sharpness of a pure orange or red.
Where you see mandarin orange
- mandarin peels
- terracotta pots
- campfire embers
- autumn maple leaves
- cheddar cheese
- monarch butterfly wings
What it works for
Use it for calls to action, food packaging, sports gear, and accent walls that need punch without tipping into alarm.
What colors go with mandarin orange?
Navy Blue #000080The deep cool base grounds the orange and keeps its heat from dominating a layout.Cream #fffdd0Cream softens the saturation and gives the orange room to glow instead of shout.Forest Green #154406Green sits opposite orange on the wheel, so the pair reads rich and natural.Charcoal #36454fCharcoal absorbs the color's loudness and lets it read as the clear focal point.Teal #008080The cool shift in teal balances the warm orange and creates a crisp, modern split.
Questions about Mandarin Orange
What is the hex code for Mandarin Orange?
Mandarin Orange is #ec6a37. In RGB that is rgb(236, 106, 55), in HSL hsl(17, 83%, 57%) and in CMYK 0%, 55%, 77%, 7%.
Is Mandarin Orange readable on white or black?
Mandarin Orange has a 3.14:1 contrast ratio on white and 6.68:1 on black. WCAG asks for 4.5:1 for body text and 3:1 for large text, so on white it works only for large text (24px, or 18.5px bold) and on black it works for body text. Try other pairs in the contrast checker.