Last of the Lilacs

CSS

:root {
  --last-of-the-lilacs: #cbbbcd;
  --last-of-the-lilacs-rgb: 203 187 205;
  --last-of-the-lilacs-oklch: oklch(0.811 0.03 322.4);
}

.element {
  color: var(--last-of-the-lilacs);
  background-color: hsl(293 15% 77%);
  border-color: oklch(0.811 0.03 322.4);
}

Tailwind CSS v4

@theme {
  --color-last-of-the-lilacs: #cbbbcd;
  --color-last-of-the-lilacs-50: #faf2fa;
  --color-last-of-the-lilacs-100: #ede5ee;
  --color-last-of-the-lilacs-200: #dbd0dc;
  --color-last-of-the-lilacs-300: #c0b2c0;
  --color-last-of-the-lilacs-400: #a799a9;
  --color-last-of-the-lilacs-500: #908092;
  --color-last-of-the-lilacs-600: #7a6c7c;
  --color-last-of-the-lilacs-700: #625663;
  --color-last-of-the-lilacs-800: #473f49;
  --color-last-of-the-lilacs-900: #312b33;
  --color-last-of-the-lilacs-950: #1d191e;
}

SCSS

$last-of-the-lilacs: #cbbbcd;
$last-of-the-lilacs-rgb: 203, 187, 205;
$last-of-the-lilacs-light: mix(#fff, $last-of-the-lilacs, 20%);
$last-of-the-lilacs-dark: mix(#000, $last-of-the-lilacs, 20%);

.element {
  color: $last-of-the-lilacs;
  box-shadow: 0 0 0 2px rgba($last-of-the-lilacs, 0.35);
}