#B31DFD

CSS

:root {
  --the-grape-war-of-97: #b31dfd;
  --the-grape-war-of-97-rgb: 179 29 253;
  --the-grape-war-of-97-oklch: oklch(0.599 0.29 309.5);
}

.element {
  color: var(--the-grape-war-of-97);
  background-color: hsl(280 98% 55%);
  border-color: oklch(0.599 0.29 309.5);
}

Tailwind CSS v4

@theme {
  --color-the-grape-war-of-97: #b31dfd;
  --color-the-grape-war-of-97-50: #ffddff;
  --color-the-grape-war-of-97-100: #ffcbff;
  --color-the-grape-war-of-97-200: #fdadff;
  --color-the-grape-war-of-97-300: #e782ff;
  --color-the-grape-war-of-97-400: #d157ff;
  --color-the-grape-war-of-97-500: #bf00ff;
  --color-the-grape-war-of-97-600: #a108e6;
  --color-the-grape-war-of-97-700: #810bb9;
  --color-the-grape-war-of-97-800: #5e078d;
  --color-the-grape-war-of-97-900: #420764;
  --color-the-grape-war-of-97-950: #2a0045;
}

SCSS

$the-grape-war-of-97: #b31dfd;
$the-grape-war-of-97-rgb: 179, 29, 253;
$the-grape-war-of-97-light: mix(#fff, $the-grape-war-of-97, 20%);
$the-grape-war-of-97-dark: mix(#000, $the-grape-war-of-97, 20%);

.element {
  color: $the-grape-war-of-97;
  box-shadow: 0 0 0 2px rgba($the-grape-war-of-97, 0.35);
}