Tailwind Amber
Amber is the classic warning colour and a natural fit for ratings, highlights and "attention" states. Its mid shades glow, while the light tints make soft warning banners.
Click any value to copy it. All 11 Amber shades (50–950) in hex, OKLCH, RGB, HSL and Tailwind class.
| Swatch | Shade | Class | Hex | OKLCH | RGB | HSL |
|---|---|---|---|---|---|---|
| 50 | ||||||
| 100 | ||||||
| 200 | ||||||
| 300 | ||||||
| 400 | ||||||
| 500 | ||||||
| 600 | ||||||
| 700 | ||||||
| 800 | ||||||
| 900 | ||||||
| 950 |
Where to use Tailwind Amber
- Warning banners:
bg-amber-50 text-amber-800 border-amber-200. - Star ratings and highlights:
text-amber-400. - Caution buttons:
bg-amber-500.
Related Tailwind colors
Build a full theme from Amber with the shadcn theme generator, or see the whole Tailwind colors palette.
Copied
