Tangerine
A luminous, high-energy orange with intense warmth
Tangerine is a high-saturation, luminous orange with intense, glowing energy. Because it is so bright, it functions best as a punchy 10% accent rather than a full background color. Pair it with deep charcoal or slate greys to ground its intensity. The hex code for this shade is #ff9300, which offers excellent readability with black text for accessible, high-contrast design elements.
About Tangerine
Mango flesh at the brightest hour of noon
What does tangerine mean?
Tangerine often signals fresh fruit, warm weather, and loud, cheerful energy. Its high saturation and mid-high lightness make it glow, but without white mixed in, it reads mellow rather than sharp.
Where you see tangerine
- mango flesh
- marigold petals
- basketballs
- safety vests
- detour signs
What it works for
Call-to-action buttons, sale tags, sports gear, and any design that needs attention fast.
What colors go with tangerine?
Teal #008080Teal sits opposite on the color wheel, so both colors look sharper together.Charcoal #36454fCharcoal darkens the mood and lets this color work as a pure signal.Cream #fffdd0Cream softens the brightness into something warm instead of loud.Olive #808000Olive pulls the saturation down and adds an earthy, outdoor feel.Plum #8e4585Plum adds depth on the cool side without turning the mix muddy.
Questions about Tangerine
What is the hex code for Tangerine?
Tangerine is #ff9300. In RGB that is rgb(255, 147, 0), in HSL hsl(35, 100%, 50%) and in CMYK 0%, 42%, 100%, 0%.
How can I effectively use Tangerine #ff9300 without overwhelming a design?
Use Tangerine #ff9300 strictly as a punchy accent color, covering no more than 10% of your layout. It demands attention, so pair it with neutrals like charcoal or slate to ground its intensity and maintain visual balance.
Is Tangerine readable on white or black?
Tangerine has a 2.22:1 contrast ratio on white and 9.42:1 on black. WCAG asks for 4.5:1 for body text and 3:1 for large text, so on white it is too faint for text and on black it works for body text. Try other pairs in the contrast checker.