Mauve

Dusty and poetic — mauve carries nostalgia, artistry, and quiet sophistication.

Shades 11

Base #e0b0ff

RGB 224, 176, 255

100

200

300

400

500

600

700

800

All Mauve Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --mauve-50: #fdf8ff;
  --mauve-100: #f9eeff;
  --mauve-200: #f2d9ff;
  --mauve-300: #e8c4ff;
  --mauve-400: #e0b0ff;
  --mauve-500: #c87de8;
  --mauve-600: #a050c4;
  --mauve-700: #7b3498;
  --mauve-800: #572269;
  --mauve-900: #34133f;
  --mauve-950: #1a0920;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        mauve: {
          50: '#fdf8ff',
          100: '#f9eeff',
          200: '#f2d9ff',
          300: '#e8c4ff',
          400: '#e0b0ff',
          500: '#c87de8',
          600: '#a050c4',
          700: '#7b3498',
          800: '#572269',
          900: '#34133f',
          950: '#1a0920',
        },
      },
    },
  },
};

SCSS Map

$mauve-palette: (
  50: #fdf8ff,
  100: #f9eeff,
  200: #f2d9ff,
  300: #e8c4ff,
  400: #e0b0ff,
  500: #c87de8,
  600: #a050c4,
  700: #7b3498,
  800: #572269,
  900: #34133f,
  950: #1a0920,
);