Tailwind Fuchsia color shades

Expressive accents, visual editors, energetic campaigns, and standout badges. This guide lists every fuchsia shade from 50 to 950, recommended foreground contrast, practical pairings, and copy-ready Tailwind configuration code.

Shade scale

50#fdf4ffdark text

100#fae8ffdark text

200#f5d0fedark text

300#f0abfcdark text

400#e879f9dark text

500#d946eflight text

600#c026d3light text

700#a21caflight text

800#86198flight text

900#701a75light text

950#4a044elight 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: {
        fuchsia: {
          50: "#fdf4ff",
          100: "#fae8ff",
          200: "#f5d0fe",
          300: "#f0abfc",
          400: "#e879f9",
          500: "#d946ef",
          600: "#c026d3",
          700: "#a21caf",
          800: "#86198f",
          900: "#701a75",
          950: "#4a044e",
        },
      },
    },
  },
};

Usage guidance

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