#4B296F

CSS

:root {
  --mystic-nights: #4b296f;
  --mystic-nights-rgb: 75 41 111;
  --mystic-nights-oklch: oklch(0.362 0.118 303.4);
}

.element {
  color: var(--mystic-nights);
  background-color: hsl(269 46% 30%);
  border-color: oklch(0.362 0.118 303.4);
}

Tailwind CSS v4

@theme {
  --color-mystic-nights: #4b296f;
  --color-mystic-nights-50: #fdedff;
  --color-mystic-nights-100: #f1dfff;
  --color-mystic-nights-200: #e0c8fd;
  --color-mystic-nights-300: #c6a8e8;
  --color-mystic-nights-400: #ad8dd7;
  --color-mystic-nights-500: #9771c6;
  --color-mystic-nights-600: #7f60a7;
  --color-mystic-nights-700: #664c86;
  --color-mystic-nights-800: #4a3864;
  --color-mystic-nights-900: #332646;
  --color-mystic-nights-950: #1f142e;
}

SCSS

$mystic-nights: #4b296f;
$mystic-nights-rgb: 75, 41, 111;
$mystic-nights-light: mix(#fff, $mystic-nights, 20%);
$mystic-nights-dark: mix(#000, $mystic-nights, 20%);

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