Tailwind Violet color shades

Creative tools, AI products, premium details, and expressive gradients. This guide lists every violet shade from 50 to 950, recommended foreground contrast, practical pairings, and copy-ready Tailwind configuration code.

Shade scale

50#f5f3ffdark text

100#ede9fedark text

200#ddd6fedark text

300#c4b5fddark text

400#a78bfadark text

500#8b5cf6light text

600#7c3aedlight text

700#6d28d9light text

800#5b21b6light text

900#4c1d95light text

950#2e1065light 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: {
        violet: {
          50: "#f5f3ff",
          100: "#ede9fe",
          200: "#ddd6fe",
          300: "#c4b5fd",
          400: "#a78bfa",
          500: "#8b5cf6",
          600: "#7c3aed",
          700: "#6d28d9",
          800: "#5b21b6",
          900: "#4c1d95",
          950: "#2e1065",
        },
      },
    },
  },
};

Usage guidance

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