Mellow Mango
#cc4400
Softer burnt orange with mellow, drier undertone
About Mellow Mango
Mellow Mango looks like a sunlit slice of orange that's been mellowed down, not a sharp warning stripe. Compared to Fire Bolt, it's less immediate and more rounded in feel, and compared to Mr. Krabs it leans softer and less "painted-caution." It also avoids the pinkier, meatier direction you get from Bloody Salmon, staying more clearly orange all the way through.
For UI, I use Mellow Mango when you want warmth and attention without the "fire drill" energy of the brighter flame oranges. It works well for e-commerce merchandising, grocery and beverage apps, and fintech marketing or onboarding panels where you want CTAs to feel friendly but still purposeful. It's also my pick for status badges on processing flows and category chips on retail operations screens, especially when the rest of the interface is cream or light neutrals.
Quirk: on very white backgrounds it can read slightly gentler than you expect. If you need it to punch harder, bump weight or pair it with a deeper orange keyline instead of cooler grays.
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.