Violet

Imagination and magic — violet sparks creativity and wonder.

Shades 11

Base #8b5cf6

RGB 139, 92, 246

100

200

300

400

500

600

700

800

All Violet Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;
  --violet-950: #2e1065;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        violet: {
          50: '#f5f3ff',
          100: '#ede9fe',
          200: '#ddd6fe',
          300: '#c4b5fd',
          400: '#a78bfa',
          500: '#8b5cf6',
          600: '#7c3aed',
          700: '#6d28d9',
          800: '#5b21b6',
          900: '#4c1d95',
          950: '#2e1065',
        },
      },
    },
  },
};

SCSS Map

$violet-palette: (
  50: #f5f3ff,
  100: #ede9fe,
  200: #ddd6fe,
  300: #c4b5fd,
  400: #a78bfa,
  500: #8b5cf6,
  600: #7c3aed,
  700: #6d28d9,
  800: #5b21b6,
  900: #4c1d95,
  950: #2e1065,
);