Lords of the Night

CSS

:root {
  --lords-of-the-night: #664488;
  --lords-of-the-night-rgb: 102 68 136;
  --lords-of-the-night-oklch: oklch(0.456 0.112 305.5);
}

.element {
  color: var(--lords-of-the-night);
  background-color: hsl(270 33% 40%);
  border-color: oklch(0.456 0.112 305.5);
}

Tailwind CSS v4

@theme {
  --color-lords-of-the-night: #664488;
  --color-lords-of-the-night-50: #feedff;
  --color-lords-of-the-night-100: #f2dfff;
  --color-lords-of-the-night-200: #e1c8fa;
  --color-lords-of-the-night-300: #c7a8e4;
  --color-lords-of-the-night-400: #ae8dd3;
  --color-lords-of-the-night-500: #9871c1;
  --color-lords-of-the-night-600: #8160a3;
  --color-lords-of-the-night-700: #674d83;
  --color-lords-of-the-night-800: #4b3862;
  --color-lords-of-the-night-900: #342645;
  --color-lords-of-the-night-950: #1f142d;
}

SCSS

$lords-of-the-night: #664488;
$lords-of-the-night-rgb: 102, 68, 136;
$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);
}