Arancio
#ff7013
Drier, deep orange that reads like UI accent
About Arancio
Arancio is what happens when orange stops being a signal and starts being a material. It's got more red bleeding through than À l'Orange, which pushes it warmer and slightly heavier, closer to actual clay or terracotta than to that brighter, more amber-leaning neighbor. It's still lighter and less saturated than Butternut Squash, so it doesn't demand the same visual weight or grounding.
Use it in food e-commerce, travel apps, and product launches where you need warmth that feels real but not rustic. It works particularly well on secondary actions, category highlights, and product cards where À l'Orange might feel too delicate and Butternut Squash too settled. Unlike Atomic Orange's disciplined restraint, this one commits to heat without apology. It pairs cleanly with charcoal type and holds its own on both light and warm backgrounds, though it reads slightly softer on cooler tones than its more saturated cousins.
The key difference: it's saturated enough to feel intentional, but the red undertone keeps it from the clinical punch that Cheese Please or Atomic Orange bring. It's the one you reach for when you want motion that still feels approachable.
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.