Tailwind Orange color shades

Warm calls to action, onboarding highlights, and friendly warning states. This guide lists every orange shade from 50 to 950, recommended foreground contrast, practical pairings, and copy-ready Tailwind configuration code.

Shade scale

50#fff7eddark text

100#ffedd5dark text

200#fed7aadark text

300#fdba74dark text

400#fb923cdark text

500#f97316light text

600#ea580clight text

700#c2410clight text

800#9a3412light text

900#7c2d12light text

950#431407light 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: {
        orange: {
          50: "#fff7ed",
          100: "#ffedd5",
          200: "#fed7aa",
          300: "#fdba74",
          400: "#fb923c",
          500: "#f97316",
          600: "#ea580c",
          700: "#c2410c",
          800: "#9a3412",
          900: "#7c2d12",
          950: "#431407",
        },
      },
    },
  },
};

Usage guidance

Use Orange 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.