Fuchsia

Bold, playful, and irresistible — fuchsia is unapologetically vibrant.

Shades 11

Base #d946ef

RGB 217, 70, 239

100

200

300

400

500

600

700

800

All Fuchsia Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --fuchsia-50: #fdf4ff;
  --fuchsia-100: #fae8ff;
  --fuchsia-200: #f5d0fe;
  --fuchsia-300: #f0abfc;
  --fuchsia-400: #e879f9;
  --fuchsia-500: #d946ef;
  --fuchsia-600: #c026d3;
  --fuchsia-700: #a21caf;
  --fuchsia-800: #86198f;
  --fuchsia-900: #701a75;
  --fuchsia-950: #4a044e;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  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',
        },
      },
    },
  },
};

SCSS Map

$fuchsia-palette: (
  50: #fdf4ff,
  100: #fae8ff,
  200: #f5d0fe,
  300: #f0abfc,
  400: #e879f9,
  500: #d946ef,
  600: #c026d3,
  700: #a21caf,
  800: #86198f,
  900: #701a75,
  950: #4a044e,
);