Red vs Rose for Error States
Compare red and rose for form validation, error messages, and alert banners.
Red
#ef4444
Pure red, classic error
Rose
#f43f5e
Pink-shifted, softer error
Side-by-Side Comparison
| Aspect | Red | Rose |
|---|---|---|
| Severity | High, critical, blocking | Medium, correctable, guiding |
| User emotion | Alarming, stressful | Firm but less intimidating |
| Pairs well with | White, gray backgrounds | Slate, modern dark themes |
| Use case | System down, data loss risk | Invalid email, missing field |
| Best For | Critical errors, system failures | Form validation, gentle corrections |
Our Recommendation
Red for critical system errors. Rose for friendlier form validation and gentle corrections.
Tailwind Classes
Red
Background: bg-red-500
Text: text-red-500
Border: border-red-500
Rose
Background: bg-rose-500
Text: text-rose-500
Border: border-rose-500
#error#red#rose#status#comparison