#694695

CSS

:root {
  --lords-of-the-night: #694695;
  --lords-of-the-night-rgb: 105 70 149;
  --lords-of-the-night-oklch: oklch(0.47 0.127 302.2);
}

.element {
  color: var(--lords-of-the-night);
  background-color: hsl(267 36% 43%);
  border-color: oklch(0.47 0.127 302.2);
}

Tailwind CSS v4

@theme {
  --color-lords-of-the-night: #694695;
  --color-lords-of-the-night-50: #fdedff;
  --color-lords-of-the-night-100: #f1deff;
  --color-lords-of-the-night-200: #e0c7ff;
  --color-lords-of-the-night-300: #c6a7ec;
  --color-lords-of-the-night-400: #ad8cdc;
  --color-lords-of-the-night-500: #966fcb;
  --color-lords-of-the-night-600: #7f5eab;
  --color-lords-of-the-night-700: #664b8a;
  --color-lords-of-the-night-800: #4a3767;
  --color-lords-of-the-night-900: #332649;
  --color-lords-of-the-night-950: #1f1430;
}

SCSS

$lords-of-the-night: #694695;
$lords-of-the-night-rgb: 105, 70, 149;
$lords-of-the-night-light: mix(#fff, $lords-of-the-night, 20%);
$lords-of-the-night-dark: mix(#000, $lords-of-the-night, 20%);

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