#9579C2

CSS

:root {
  --viola: #9579c2;
  --viola-rgb: 149 121 194;
  --viola-oklch: oklch(0.631 0.111 300.9);
}

.element {
  color: var(--viola);
  background-color: hsl(263 37% 62%);
  border-color: oklch(0.631 0.111 300.9);
}

Tailwind CSS v4

@theme {
  --color-viola: #9579c2;
  --color-viola-50: #fbeeff;
  --color-viola-100: #efe0ff;
  --color-viola-200: #ddc9fc;
  --color-viola-300: #c3aae7;
  --color-viola-400: #a98fd6;
  --color-viola-500: #9373c4;
  --color-viola-600: #7c62a5;
  --color-viola-700: #634e85;
  --color-viola-800: #483963;
  --color-viola-900: #322746;
  --color-viola-950: #1e152d;
}

SCSS

$viola: #9579c2;
$viola-rgb: 149, 121, 194;
$viola-light: mix(#fff, $viola, 20%);
$viola-dark: mix(#000, $viola, 20%);

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