#533F7C

CSS

:root {
  --in-the-vines: #533f7c;
  --in-the-vines-rgb: 83 63 124;
  --in-the-vines-oklch: oklch(0.419 0.1 297);
}

.element {
  color: var(--in-the-vines);
  background-color: hsl(260 33% 37%);
  border-color: oklch(0.419 0.1 297);
}

Tailwind CSS v4

@theme {
  --color-in-the-vines: #533f7c;
  --color-in-the-vines-50: #f9efff;
  --color-in-the-vines-100: #ece1ff;
  --color-in-the-vines-200: #dacbfa;
  --color-in-the-vines-300: #beade4;
  --color-in-the-vines-400: #a492d3;
  --color-in-the-vines-500: #8d77c0;
  --color-in-the-vines-600: #7765a2;
  --color-in-the-vines-700: #605182;
  --color-in-the-vines-800: #453b61;
  --color-in-the-vines-900: #302844;
  --color-in-the-vines-950: #1c162c;
}

SCSS

$in-the-vines: #533f7c;
$in-the-vines-rgb: 83, 63, 124;
$in-the-vines-light: mix(#fff, $in-the-vines, 20%);
$in-the-vines-dark: mix(#000, $in-the-vines, 20%);

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