#4E2679

CSS

:root {
  --mystic-nights: #4e2679;
  --mystic-nights-rgb: 78 38 121;
  --mystic-nights-oklch: oklch(0.368 0.136 302.3);
}

.element {
  color: var(--mystic-nights);
  background-color: hsl(269 52% 31%);
  border-color: oklch(0.368 0.136 302.3);
}

Tailwind CSS v4

@theme {
  --color-mystic-nights: #4e2679;
  --color-mystic-nights-50: #feecff;
  --color-mystic-nights-100: #f2ddff;
  --color-mystic-nights-200: #e1c6ff;
  --color-mystic-nights-300: #c7a6f0;
  --color-mystic-nights-400: #ae8ae1;
  --color-mystic-nights-500: #986dd0;
  --color-mystic-nights-600: #805daf;
  --color-mystic-nights-700: #674a8d;
  --color-mystic-nights-800: #4a366a;
  --color-mystic-nights-900: #33254a;
  --color-mystic-nights-950: #1f1331;
}

SCSS

$mystic-nights: #4e2679;
$mystic-nights-rgb: 78, 38, 121;
$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);
}