Tailwind CSS amber color

The 11 shades of Tailwind CSS amber, from amber-50 (lightest) to amber-950 (darkest). Click any value to copy it.

amber shades

HEX and RGB from Tailwind v3; OKLCH from Tailwind v4. Click a value to copy it.

amber-50

amber-100

amber-200

amber-300

amber-400

amber-500

amber-600

amber-700

amber-800

amber-900

amber-950

Copy the whole palette

Tailwind v4 (CSS, @theme)

@theme {
  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-900: oklch(41.4% 0.112 45.904);
  --color-amber-950: oklch(27.9% 0.077 45.635);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        amber: {
          50: '#fffbeb',
          100: '#fef3c7',
          200: '#fde68a',
          300: '#fcd34d',
          400: '#fbbf24',
          500: '#f59e0b',
          600: '#d97706',
          700: '#b45309',
          800: '#92400e',
          900: '#78350f',
          950: '#451a03'
        }
      }
    }
  }
}

CSS variables (HEX)

:root {
  --amber-50: #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;
  --amber-950: #451A03;
}

More Tailwind colors

slate gray zinc neutral stone red orange yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose

Frequently asked questions

What is the HEX code for Tailwind amber-500?

In Tailwind v3, amber-500 is #F59E0B, which is rgb(245, 158, 11). In Tailwind v4 it is defined as oklch(76.9% 0.188 70.08).

How do I use Tailwind amber in my project?

With classes like bg-amber-500, text-amber-700 or border-amber-200. In Tailwind v4 you can also use the CSS variable var(--color-amber-500) in your own CSS.

Other frameworks

Tailwind CSS, Material Design and Bootstrap are trademarks of their respective owners. The values come from their public documentation and packages: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.