Lilac

Whimsical and airy — lilac captures the fleeting beauty of spring blossoms.

Shades 11

Base #c8a2c8

RGB 200, 162, 200

100

200

300

400

500

600

700

800

All Lilac Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --lilac-50: #fdf8fd;
  --lilac-100: #f8edf8;
  --lilac-200: #f0dbf0;
  --lilac-300: #dfc3df;
  --lilac-400: #c8a2c8;
  --lilac-500: #b07db0;
  --lilac-600: #8e5a8e;
  --lilac-700: #6b406b;
  --lilac-800: #4a2b4a;
  --lilac-900: #2c192c;
  --lilac-950: #160c16;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        lilac: {
          50: '#fdf8fd',
          100: '#f8edf8',
          200: '#f0dbf0',
          300: '#dfc3df',
          400: '#c8a2c8',
          500: '#b07db0',
          600: '#8e5a8e',
          700: '#6b406b',
          800: '#4a2b4a',
          900: '#2c192c',
          950: '#160c16',
        },
      },
    },
  },
};

SCSS Map

$lilac-palette: (
  50: #fdf8fd,
  100: #f8edf8,
  200: #f0dbf0,
  300: #dfc3df,
  400: #c8a2c8,
  500: #b07db0,
  600: #8e5a8e,
  700: #6b406b,
  800: #4a2b4a,
  900: #2c192c,
  950: #160c16,
);