#8B196A

CSS

:root {
  --bane-of-royalty: #8b196a;
  --bane-of-royalty-rgb: 139 25 106;
  --bane-of-royalty-oklch: oklch(0.439 0.168 342.9);
}

.element {
  color: var(--bane-of-royalty);
  background-color: hsl(317 70% 32%);
  border-color: oklch(0.439 0.168 342.9);
}

Tailwind CSS v4

@theme {
  --color-bane-of-royalty: #8b196a;
  --color-bane-of-royalty-50: #ffe3ff;
  --color-bane-of-royalty-100: #ffd2f5;
  --color-bane-of-royalty-200: #ffb7e5;
  --color-bane-of-royalty-300: #f493cb;
  --color-bane-of-royalty-400: #e072b8;
  --color-bane-of-royalty-500: #cd4ea3;
  --color-bane-of-royalty-600: #ad438a;
  --color-bane-of-royalty-700: #8b366e;
  --color-bane-of-royalty-800: #672653;
  --color-bane-of-royalty-900: #481a3a;
  --color-bane-of-royalty-950: #2f0924;
}

SCSS

$bane-of-royalty: #8b196a;
$bane-of-royalty-rgb: 139, 25, 106;
$bane-of-royalty-light: mix(#fff, $bane-of-royalty, 20%);
$bane-of-royalty-dark: mix(#000, $bane-of-royalty, 20%);

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