Lavender

Gentle elegance and calmness — lavender balances creativity with serenity.

Shades 11

Base #b57edc

RGB 181, 126, 220

100

200

300

400

500

600

700

800

All Lavender Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --lavender-50: #fcf9ff;
  --lavender-100: #f4ebfc;
  --lavender-200: #ead8f8;
  --lavender-300: #d8b8f1;
  --lavender-400: #c898ea;
  --lavender-500: #b57edc;
  --lavender-600: #9660bd;
  --lavender-700: #744793;
  --lavender-800: #52316a;
  --lavender-900: #311d40;
  --lavender-950: #180e20;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        lavender: {
          50: '#fcf9ff',
          100: '#f4ebfc',
          200: '#ead8f8',
          300: '#d8b8f1',
          400: '#c898ea',
          500: '#b57edc',
          600: '#9660bd',
          700: '#744793',
          800: '#52316a',
          900: '#311d40',
          950: '#180e20',
        },
      },
    },
  },
};

SCSS Map

$lavender-palette: (
  50: #fcf9ff,
  100: #f4ebfc,
  200: #ead8f8,
  300: #d8b8f1,
  400: #c898ea,
  500: #b57edc,
  600: #9660bd,
  700: #744793,
  800: #52316a,
  900: #311d40,
  950: #180e20,
);