Pale Lilac

CSS

:root {
  --pale-lilac: #d8b5bf;
  --pale-lilac-rgb: 216 181 191;
  --pale-lilac-oklch: oklch(0.807 0.042 359);
}

.element {
  color: var(--pale-lilac);
  background-color: hsl(343 31% 78%);
  border-color: oklch(0.807 0.042 359);
}

Tailwind CSS v4

@theme {
  --color-pale-lilac: #d8b5bf;
  --color-pale-lilac-50: #fff0f4;
  --color-pale-lilac-100: #f5e2e7;
  --color-pale-lilac-200: #e5cdd3;
  --color-pale-lilac-300: #cbafb6;
  --color-pale-lilac-400: #b4949e;
  --color-pale-lilac-500: #9f7b85;
  --color-pale-lilac-600: #866871;
  --color-pale-lilac-700: #6b535a;
  --color-pale-lilac-800: #4f3c42;
  --color-pale-lilac-900: #372a2e;
  --color-pale-lilac-950: #22171b;
}

SCSS

$pale-lilac: #d8b5bf;
$pale-lilac-rgb: 216, 181, 191;
$pale-lilac-light: mix(#fff, $pale-lilac, 20%);
$pale-lilac-dark: mix(#000, $pale-lilac, 20%);

.element {
  color: $pale-lilac;
  box-shadow: 0 0 0 2px rgba($pale-lilac, 0.35);
}