Wild Grapes

CSS

:root {
  --wild-grapes: #5e496c;
  --wild-grapes-rgb: 94 73 108;
  --wild-grapes-oklch: oklch(0.441 0.062 311.3);
}

.element {
  color: var(--wild-grapes);
  background-color: hsl(276 19% 35%);
  border-color: oklch(0.441 0.062 311.3);
}

Tailwind CSS v4

@theme {
  --color-wild-grapes: #5e496c;
  --color-wild-grapes-50: #fcf0ff;
  --color-wild-grapes-100: #efe2f7;
  --color-wild-grapes-200: #decde7;
  --color-wild-grapes-300: #c3afce;
  --color-wild-grapes-400: #aa94ba;
  --color-wild-grapes-500: #947ba4;
  --color-wild-grapes-600: #7d688b;
  --color-wild-grapes-700: #64536f;
  --color-wild-grapes-800: #493d53;
  --color-wild-grapes-900: #322a3a;
  --color-wild-grapes-950: #1e1724;
}

SCSS

$wild-grapes: #5e496c;
$wild-grapes-rgb: 94, 73, 108;
$wild-grapes-light: mix(#fff, $wild-grapes, 20%);
$wild-grapes-dark: mix(#000, $wild-grapes, 20%);

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