Purple

Royalty, mystery, and ambition — purple commands prestige.

Shades 11

Base #a855f7

RGB 168, 85, 247

100

200

300

400

500

600

700

800

All Purple Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --purple-800: #6b21a8;
  --purple-900: #581c87;
  --purple-950: #3b0764;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        purple: {
          50: '#faf5ff',
          100: '#f3e8ff',
          200: '#e9d5ff',
          300: '#d8b4fe',
          400: '#c084fc',
          500: '#a855f7',
          600: '#9333ea',
          700: '#7e22ce',
          800: '#6b21a8',
          900: '#581c87',
          950: '#3b0764',
        },
      },
    },
  },
};

SCSS Map

$purple-palette: (
  50: #faf5ff,
  100: #f3e8ff,
  200: #e9d5ff,
  300: #d8b4fe,
  400: #c084fc,
  500: #a855f7,
  600: #9333ea,
  700: #7e22ce,
  800: #6b21a8,
  900: #581c87,
  950: #3b0764,
);