God of Nights

CSS

:root {
  --god-of-nights: #550066;
  --god-of-nights-rgb: 85 0 102;
  --god-of-nights-oklch: oklch(0.329 0.158 319.3);
}

.element {
  color: var(--god-of-nights);
  background-color: hsl(290 100% 20%);
  border-color: oklch(0.329 0.158 319.3);
}

Tailwind CSS v4

@theme {
  --color-god-of-nights: #550066;
  --color-god-of-nights-50: #ffe7ff;
  --color-god-of-nights-100: #ffd7ff;
  --color-god-of-nights-200: #f4befd;
  --color-god-of-nights-300: #dd9ce8;
  --color-god-of-nights-400: #c67dd9;
  --color-god-of-nights-500: #b25dc7;
  --color-god-of-nights-600: #9650a8;
  --color-god-of-nights-700: #794087;
  --color-god-of-nights-800: #582e66;
  --color-god-of-nights-900: #3e1f47;
  --color-god-of-nights-950: #270e2f;
}

SCSS

$god-of-nights: #550066;
$god-of-nights-rgb: 85, 0, 102;
$god-of-nights-light: mix(#fff, $god-of-nights, 20%);
$god-of-nights-dark: mix(#000, $god-of-nights, 20%);

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