#615082

CSS

:root {
  --sumptuous-purple: #615082;
  --sumptuous-purple-rgb: 97 80 130;
  --sumptuous-purple-oklch: oklch(0.47 0.081 298.9);
}

.element {
  color: var(--sumptuous-purple);
  background-color: hsl(260 24% 41%);
  border-color: oklch(0.47 0.081 298.9);
}

Tailwind CSS v4

@theme {
  --color-sumptuous-purple: #615082;
  --color-sumptuous-purple-50: #f9f0ff;
  --color-sumptuous-purple-100: #ece2ff;
  --color-sumptuous-purple-200: #dacdf2;
  --color-sumptuous-purple-300: #beaedb;
  --color-sumptuous-purple-400: #a594c8;
  --color-sumptuous-purple-500: #8d7ab5;
  --color-sumptuous-purple-600: #786799;
  --color-sumptuous-purple-700: #60537a;
  --color-sumptuous-purple-800: #453c5b;
  --color-sumptuous-purple-900: #302940;
  --color-sumptuous-purple-950: #1c1729;
}

SCSS

$sumptuous-purple: #615082;
$sumptuous-purple-rgb: 97, 80, 130;
$sumptuous-purple-light: mix(#fff, $sumptuous-purple, 20%);
$sumptuous-purple-dark: mix(#000, $sumptuous-purple, 20%);

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