Tailwind Amber color shades

Status warnings, attention badges, warm accents, and optimistic empty states. This guide lists every amber shade from 50 to 950, recommended foreground contrast, practical pairings, and copy-ready Tailwind configuration code.

Shade scale

50#fffbebdark text

100#fef3c7dark text

200#fde68adark text

300#fcd34ddark text

400#fbbf24dark text

500#f59e0blight text

600#d97706light text

700#b45309light text

800#92400elight text

900#78350flight text

950#451a03light text

Copy-ready Tailwind config

Use a complete class-safe object in your config or token layer. Keeping the full class names and shade keys visible helps build tools and search engines understand the generated code.

export default {
  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",
        },
      },
    },
  },
};

Usage guidance

Use Amber 50-100 for subtle surfaces, 200-300 for tinted backgrounds, 400-600 for visible accents, and 700-950 for strong text, deep surfaces, or dark-mode emphasis.

For accessibility, test real text sizes and weights before shipping. A shade that passes for large labels may still be weak for compact body copy, disabled states, or small badges.