Tailwind Amber
All 11 Amber shades, 50 to 950 — click any value to copy it as hex, OKLCH, RGB, HSL or class name.
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 |
What is Tailwind Amber?
Tailwind Amber is one of the 22 default color families in Tailwind CSS, published as 11 shades running from amber-50 (lightest) to amber-950 (darkest). Tailwind CSS v4 defines every shade in OKLCH, with a hex fallback for older browsers. Reach them through utility classes such as bg-amber-500, text-amber-700 and border-amber-200 — no config needed.
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
Related tools
- Tailwind Colors — the full palette, all 22 families and 242 shades.
- Shadcn Theme Generator — turn Amber into light and dark shadcn tokens.
- OKLCH Converter — convert any Amber hex to OKLCH, RGB or HSL.
- Color Shades Generator — turn your own brand color into an OKLCH tint and shade scale.
