#4F3076

CSS

:root {
  --mystic-nights: #4f3076;
  --mystic-nights-rgb: 79 48 118;
  --mystic-nights-oklch: oklch(0.383 0.116 301.6);
}

.element {
  color: var(--mystic-nights);
  background-color: hsl(267 42% 33%);
  border-color: oklch(0.383 0.116 301.6);
}

Tailwind CSS v4

@theme {
  --color-mystic-nights: #4f3076;
  --color-mystic-nights-50: #fceeff;
  --color-mystic-nights-100: #f0dfff;
  --color-mystic-nights-200: #dec9fe;
  --color-mystic-nights-300: #c4a9e9;
  --color-mystic-nights-400: #ab8ed8;
  --color-mystic-nights-500: #9472c6;
  --color-mystic-nights-600: #7d61a7;
  --color-mystic-nights-700: #644d86;
  --color-mystic-nights-800: #483865;
  --color-mystic-nights-900: #322747;
  --color-mystic-nights-950: #1e152e;
}

SCSS

$mystic-nights: #4f3076;
$mystic-nights-rgb: 79, 48, 118;
$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);
}