Wisteria

Cascading and romantic — wisteria drifts between blue and violet with dreamy, floral softness.

Shades 11

Base #c9a0dc

RGB 201, 160, 220

100

200

300

400

500

600

700

800

All Wisteria Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --wisteria-50: #faf6fd;
  --wisteria-100: #f3e9fa;
  --wisteria-200: #e7d3f5;
  --wisteria-300: #d9bced;
  --wisteria-400: #c9a0dc;
  --wisteria-500: #b07fc4;
  --wisteria-600: #8d5ca0;
  --wisteria-700: #6a417a;
  --wisteria-800: #4a2c56;
  --wisteria-900: #2c1933;
  --wisteria-950: #160c1a;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        wisteria: {
          50: '#faf6fd',
          100: '#f3e9fa',
          200: '#e7d3f5',
          300: '#d9bced',
          400: '#c9a0dc',
          500: '#b07fc4',
          600: '#8d5ca0',
          700: '#6a417a',
          800: '#4a2c56',
          900: '#2c1933',
          950: '#160c1a',
        },
      },
    },
  },
};

SCSS Map

$wisteria-palette: (
  50: #faf6fd,
  100: #f3e9fa,
  200: #e7d3f5,
  300: #d9bced,
  400: #c9a0dc,
  500: #b07fc4,
  600: #8d5ca0,
  700: #6a417a,
  800: #4a2c56,
  900: #2c1933,
  950: #160c1a,
);