Queens of the Dead

CSS

:root {
  --queens-of-the-dead: #652793;
  --queens-of-the-dead-rgb: 101 39 147;
  --queens-of-the-dead-oklch: oklch(0.419 0.169 306.6);
}

.element {
  color: var(--queens-of-the-dead);
  background-color: hsl(274 58% 36%);
  border-color: oklch(0.419 0.169 306.6);
}

Tailwind CSS v4

@theme {
  --color-queens-of-the-dead: #652793;
  --color-queens-of-the-dead-50: #ffe9ff;
  --color-queens-of-the-dead-100: #f8d9ff;
  --color-queens-of-the-dead-200: #e9c1ff;
  --color-queens-of-the-dead-300: #d09ff9;
  --color-queens-of-the-dead-400: #b881ec;
  --color-queens-of-the-dead-500: #a361dc;
  --color-queens-of-the-dead-600: #8a53ba;
  --color-queens-of-the-dead-700: #6f4295;
  --color-queens-of-the-dead-800: #503071;
  --color-queens-of-the-dead-900: #38204f;
  --color-queens-of-the-dead-950: #220f35;
}

SCSS

$queens-of-the-dead: #652793;
$queens-of-the-dead-rgb: 101, 39, 147;
$queens-of-the-dead-light: mix(#fff, $queens-of-the-dead, 20%);
$queens-of-the-dead-dark: mix(#000, $queens-of-the-dead, 20%);

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