Orange vs Red: Energy vs Urgency
Compare Tailwind's orange and red for CTAs, warnings, and high-visibility elements.
Orange
#f97316
Warm yellow-red blend
Red
#ef4444
Pure true red
Side-by-Side Comparison
| Aspect | Orange | Red |
|---|---|---|
| Undertone | Yellow-shifted, warmer | True red, no shift |
| Mood | Inviting, energetic, approachable | Urgent, dangerous, commanding |
| Intensity | High energy, friendly | High urgency, alarming |
| Use case | Add to cart, sign up, subscribe | Delete, cancel, error alerts |
| Best For | Friendly CTAs, marketing, engagement | Errors, critical actions, danger signals |
Our Recommendation
Orange for engaging, positive CTAs. Red for critical warnings and destructive actions.
Tailwind Classes
Orange
Background: bg-orange-500
Text: text-orange-500
Border: border-orange-500
Red
Background: bg-red-500
Text: text-red-500
Border: border-red-500
#oranges#reds#orange#red#warm#comparison