The Grape War of 97’

CSS

:root {
  --the-grape-war-of-97: #bb00ff;
  --the-grape-war-of-97-rgb: 187 0 255;
  --the-grape-war-of-97-oklch: oklch(0.604 0.302 311.9);
}

.element {
  color: var(--the-grape-war-of-97);
  background-color: hsl(284 100% 50%);
  border-color: oklch(0.604 0.302 311.9);
}

Tailwind CSS v4

@theme {
  --color-the-grape-war-of-97: #bb00ff;
  --color-the-grape-war-of-97-50: #ffdbff;
  --color-the-grape-war-of-97-100: #ffc9ff;
  --color-the-grape-war-of-97-200: #ffa9ff;
  --color-the-grape-war-of-97-300: #ed7dff;
  --color-the-grape-war-of-97-400: #d84eff;
  --color-the-grape-war-of-97-500: #c600ff;
  --color-the-grape-war-of-97-600: #a700e6;
  --color-the-grape-war-of-97-700: #8600b9;
  --color-the-grape-war-of-97-800: #61008d;
  --color-the-grape-war-of-97-900: #440064;
  --color-the-grape-war-of-97-950: #2c0045;
}

SCSS

$the-grape-war-of-97: #bb00ff;
$the-grape-war-of-97-rgb: 187, 0, 255;
$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);
}