#682B9A

CSS

:root {
  --queens-of-the-dead: #682b9a;
  --queens-of-the-dead-rgb: 104 43 154;
  --queens-of-the-dead-oklch: oklch(0.433 0.172 305.4);
}

.element {
  color: var(--queens-of-the-dead);
  background-color: hsl(273 56% 39%);
  border-color: oklch(0.433 0.172 305.4);
}

Tailwind CSS v4

@theme {
  --color-queens-of-the-dead: #682b9a;
  --color-queens-of-the-dead-50: #ffe9ff;
  --color-queens-of-the-dead-100: #f7d9ff;
  --color-queens-of-the-dead-200: #e8c1ff;
  --color-queens-of-the-dead-300: #cf9ffc;
  --color-queens-of-the-dead-400: #b781ef;
  --color-queens-of-the-dead-500: #a260df;
  --color-queens-of-the-dead-600: #8952bc;
  --color-queens-of-the-dead-700: #6e4297;
  --color-queens-of-the-dead-800: #4f3072;
  --color-queens-of-the-dead-900: #372051;
  --color-queens-of-the-dead-950: #220f36;
}

SCSS

$queens-of-the-dead: #682b9a;
$queens-of-the-dead-rgb: 104, 43, 154;
$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);
}