Red vs Amber: Alert Severity Compared
Compare Tailwind's red and amber for status indicators and alert hierarchies.
Red
#ef4444
Pure red
Amber
#f59e0b
Golden yellow-orange
Side-by-Side Comparison
| Aspect | Red | Amber |
|---|---|---|
| Undertone | True red, no shift | Golden, warm |
| Mood | Critical, alarming, stop | Cautionary, attention, slow down |
| Severity | Highest severity | Medium severity |
| Use case | Fatal errors, data loss warnings | Deprecation notices, soft warnings |
| Best For | Critical errors, danger, blocking issues | Warnings, caution, non-blocking alerts |
Our Recommendation
Red for critical, blocking errors. Amber for cautionary warnings that need attention but are not critical.
Tailwind Classes
Red
Background: bg-red-500
Text: text-red-500
Border: border-red-500
Amber
Background: bg-amber-500
Text: text-amber-500
Border: border-amber-500
#reds#oranges#red#amber#alerts#comparison