Plum

Moody and sophisticated — plum adds brooding depth and autumnal richness.

Shades 11

Base #8e4585

RGB 142, 69, 133

100

200

300

400

500

600

700

800

All Plum Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --plum-50: #fdf4fc;
  --plum-100: #f9e3f7;
  --plum-200: #f2c6ee;
  --plum-300: #e59fe3;
  --plum-400: #c974c4;
  --plum-500: #8e4585;
  --plum-600: #72346a;
  --plum-700: #562650;
  --plum-800: #3b1a38;
  --plum-900: #230f21;
  --plum-950: #110810;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        plum: {
          50: '#fdf4fc',
          100: '#f9e3f7',
          200: '#f2c6ee',
          300: '#e59fe3',
          400: '#c974c4',
          500: '#8e4585',
          600: '#72346a',
          700: '#562650',
          800: '#3b1a38',
          900: '#230f21',
          950: '#110810',
        },
      },
    },
  },
};

SCSS Map

$plum-palette: (
  50: #fdf4fc,
  100: #f9e3f7,
  200: #f2c6ee,
  300: #e59fe3,
  400: #c974c4,
  500: #8e4585,
  600: #72346a,
  700: #562650,
  800: #3b1a38,
  900: #230f21,
  950: #110810,
);