Bane of Royalty

CSS

:root {
  --bane-of-royalty: #871466;
  --bane-of-royalty-rgb: 135 20 102;
  --bane-of-royalty-oklch: oklch(0.427 0.168 343.2);
}

.element {
  color: var(--bane-of-royalty);
  background-color: hsl(317 74% 30%);
  border-color: oklch(0.427 0.168 343.2);
}

Tailwind CSS v4

@theme {
  --color-bane-of-royalty: #871466;
  --color-bane-of-royalty-50: #ffe3ff;
  --color-bane-of-royalty-100: #ffd2f5;
  --color-bane-of-royalty-200: #ffb7e4;
  --color-bane-of-royalty-300: #f493cb;
  --color-bane-of-royalty-400: #e072b8;
  --color-bane-of-royalty-500: #cd4ea2;
  --color-bane-of-royalty-600: #ad4489;
  --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: #871466;
$bane-of-royalty-rgb: 135, 20, 102;
$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);
}