#4A2B7C

CSS

:root {
  --mystic-nights: #4a2b7c;
  --mystic-nights-rgb: 74 43 124;
  --mystic-nights-oklch: oklch(0.374 0.131 297.2);
}

.element {
  color: var(--mystic-nights);
  background-color: hsl(263 49% 33%);
  border-color: oklch(0.374 0.131 297.2);
}

Tailwind CSS v4

@theme {
  --color-mystic-nights: #4a2b7c;
  --color-mystic-nights-50: #faeeff;
  --color-mystic-nights-100: #eedfff;
  --color-mystic-nights-200: #dcc8ff;
  --color-mystic-nights-300: #c1a8f1;
  --color-mystic-nights-400: #a78de2;
  --color-mystic-nights-500: #9171d1;
  --color-mystic-nights-600: #7a60b1;
  --color-mystic-nights-700: #624c8e;
  --color-mystic-nights-800: #46386b;
  --color-mystic-nights-900: #31264b;
  --color-mystic-nights-950: #1d1431;
}

SCSS

$mystic-nights: #4a2b7c;
$mystic-nights-rgb: 74, 43, 124;
$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);
}