ColorsPedia
All colors Lavender
pastelcalmfloral

Lavender

Gentle elegance and calmness — lavender balances creativity with serenity.

Shades 11
Base #b57edc
RGB 181, 126, 220
50
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,
);