Tailwind Slate color shades

Neutral interfaces, documentation, dashboards, borders, and dark-mode surfaces. This guide lists every slate shade from 50 to 950, recommended foreground contrast, practical pairings, and copy-ready Tailwind configuration code.

Shade scale

50#f8fafcdark text

100#f1f5f9dark text

200#e2e8f0dark text

300#cbd5e1dark text

400#94a3b8dark text

500#64748blight text

600#475569light text

700#334155light text

800#1e293blight text

900#0f172alight text

950#020617light 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: {
        slate: {
          50: "#f8fafc",
          100: "#f1f5f9",
          200: "#e2e8f0",
          300: "#cbd5e1",
          400: "#94a3b8",
          500: "#64748b",
          600: "#475569",
          700: "#334155",
          800: "#1e293b",
          900: "#0f172a",
          950: "#020617",
        },
      },
    },
  },
};

Usage guidance

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