Amber vs Yellow: Gold vs Sunshine
Compare Tailwind's amber and yellow for warnings, highlights, and warm accents.
Amber
#f59e0b
Orange-gold, darker
Yellow
#eab308
Pure yellow, brighter
Side-by-Side Comparison
| Aspect | Amber | Yellow |
|---|---|---|
| Undertone | Golden, orange-tinged | Pure yellow, no orange |
| Mood | Warm, cautious, premium | Bright, optimistic, cheerful |
| Accessibility | Better contrast than yellow | Very poor contrast on white |
| Use case | Warning toasts, gold badges, ratings | Text highlights, emoji, stars |
| Best For | Warning banners, premium badges | Highlights, attention, stars |
Our Recommendation
Amber for readable warnings and premium accents. Yellow for small highlights where contrast is managed.
Tailwind Classes
Amber
Background: bg-amber-500
Text: text-amber-500
Border: border-amber-500
Yellow
Background: bg-yellow-500
Text: text-yellow-500
Border: border-yellow-500
#yellows#amber#yellow#warm#comparison