Amethyst

Gemstone elegance and quiet power — amethyst pairs spiritual calm with regal depth.

Shades 11

Base #9966cc

RGB 153, 102, 204

100

200

300

400

500

600

700

800

All Amethyst Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --amethyst-50: #f7f3fc;
  --amethyst-100: #ece2f7;
  --amethyst-200: #d8c4ef;
  --amethyst-300: #bd9be3;
  --amethyst-400: #ac7fd9;
  --amethyst-500: #9966cc;
  --amethyst-600: #7d4fab;
  --amethyst-700: #5f3c82;
  --amethyst-800: #42295b;
  --amethyst-900: #271837;
  --amethyst-950: #140c1c;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        amethyst: {
          50: '#f7f3fc',
          100: '#ece2f7',
          200: '#d8c4ef',
          300: '#bd9be3',
          400: '#ac7fd9',
          500: '#9966cc',
          600: '#7d4fab',
          700: '#5f3c82',
          800: '#42295b',
          900: '#271837',
          950: '#140c1c',
        },
      },
    },
  },
};

SCSS Map

$amethyst-palette: (
  50: #f7f3fc,
  100: #ece2f7,
  200: #d8c4ef,
  300: #bd9be3,
  400: #ac7fd9,
  500: #9966cc,
  600: #7d4fab,
  700: #5f3c82,
  800: #42295b,
  900: #271837,
  950: #140c1c,
);