#4F2B75

CSS

:root {
  --mystic-nights: #4f2b75;
  --mystic-nights-rgb: 79 43 117;
  --mystic-nights-oklch: oklch(0.374 0.123 303.4);
}

.element {
  color: var(--mystic-nights);
  background-color: hsl(269 46% 31%);
  border-color: oklch(0.374 0.123 303.4);
}

Tailwind CSS v4

@theme {
  --color-mystic-nights: #4f2b75;
  --color-mystic-nights-50: #fdedff;
  --color-mystic-nights-100: #f1deff;
  --color-mystic-nights-200: #e1c7ff;
  --color-mystic-nights-300: #c6a7ea;
  --color-mystic-nights-400: #ae8cda;
  --color-mystic-nights-500: #9770c8;
  --color-mystic-nights-600: #805fa9;
  --color-mystic-nights-700: #664c88;
  --color-mystic-nights-800: #4a3766;
  --color-mystic-nights-900: #332648;
  --color-mystic-nights-950: #1f142f;
}

SCSS

$mystic-nights: #4f2b75;
$mystic-nights-rgb: 79, 43, 117;
$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);
}