Tangerine color guide
Bright, clean and energetic — the orange most brands mean when they say orange. High enough in value that white text struggles on it, so it wants dark type or none at all.
- Best for
- High-visibility buttons and wayfinding.
Accessibility
Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.
Colors that go with tangerine
Combinations that hold up in a real layout rather than only on the colour wheel.
Tangerine color harmonies
Tangerine shades and tints
The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.
Tangerine FAQ
What is the hex code for tangerine?
Tangerine is #F28500. In other formats that is rgb(242, 133, 0), hsl(33, 100%, 47%), and approximately cmyk(0%, 45%, 100%, 5%) for print.
What colors go with tangerine?
Charcoal, White, Navy Blue all pair well with tangerine. High-visibility buttons and wayfinding.
Is tangerine accessible for text?
Not on white: tangerine reaches only 2.58:1 there, below the 4.5:1 WCAG AA threshold. Use it as a background with black text on top, or reserve it for large display type.
Should text on tangerine be black or white?
Use black text. It gives the higher contrast ratio of the two against #F28500.