Magenta

Electric and fearless — magenta demands attention with unyielding vibrancy.

Shades 11

Base #ff00ff

RGB 255, 0, 255

100

200

300

400

500

600

700

800

All Magenta Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --magenta-50: #fff0ff;
  --magenta-100: #ffd6ff;
  --magenta-200: #ffadff;
  --magenta-300: #ff7aff;
  --magenta-400: #ff3dff;
  --magenta-500: #ff00ff;
  --magenta-600: #cc00cc;
  --magenta-700: #990099;
  --magenta-800: #660066;
  --magenta-900: #400040;
  --magenta-950: #200020;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        magenta: {
          50: '#fff0ff',
          100: '#ffd6ff',
          200: '#ffadff',
          300: '#ff7aff',
          400: '#ff3dff',
          500: '#ff00ff',
          600: '#cc00cc',
          700: '#990099',
          800: '#660066',
          900: '#400040',
          950: '#200020',
        },
      },
    },
  },
};

SCSS Map

$magenta-palette: (
  50: #fff0ff,
  100: #ffd6ff,
  200: #ffadff,
  300: #ff7aff,
  400: #ff3dff,
  500: #ff00ff,
  600: #cc00cc,
  700: #990099,
  800: #660066,
  900: #400040,
  950: #200020,
);