Dark Lilac

CSS

:root {
  --dark-lilac: #9c6da5;
  --dark-lilac-rgb: 156 109 165;
  --dark-lilac-oklch: oklch(0.603 0.098 321);
}

.element {
  color: var(--dark-lilac);
  background-color: hsl(290 24% 54%);
  border-color: oklch(0.603 0.098 321);
}

Tailwind CSS v4

@theme {
  --color-dark-lilac: #9c6da5;
  --color-dark-lilac-50: #ffecff;
  --color-dark-lilac-100: #f9ddfb;
  --color-dark-lilac-200: #e9c7ed;
  --color-dark-lilac-300: #d0a7d5;
  --color-dark-lilac-400: #b98bc2;
  --color-dark-lilac-500: #a470ae;
  --color-dark-lilac-600: #8a5f93;
  --color-dark-lilac-700: #6f4c76;
  --color-dark-lilac-800: #513758;
  --color-dark-lilac-900: #38263e;
  --color-dark-lilac-950: #231427;
}

SCSS

$dark-lilac: #9c6da5;
$dark-lilac-rgb: 156, 109, 165;
$dark-lilac-light: mix(#fff, $dark-lilac, 20%);
$dark-lilac-dark: mix(#000, $dark-lilac, 20%);

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