#5A4050

CSS

:root {
  --grape-fizz: #5a4050;
  --grape-fizz-rgb: 90 64 80;
  --grape-fizz-oklch: oklch(0.406 0.044 341.8);
}

.element {
  color: var(--grape-fizz);
  background-color: hsl(323 17% 30%);
  border-color: oklch(0.406 0.044 341.8);
}

Tailwind CSS v4

@theme {
  --color-grape-fizz: #5a4050;
  --color-grape-fizz-50: #fff0f8;
  --color-grape-fizz-100: #f3e2eb;
  --color-grape-fizz-200: #e3cdd9;
  --color-grape-fizz-300: #c8afbd;
  --color-grape-fizz-400: #b195a6;
  --color-grape-fizz-500: #9b7b8e;
  --color-grape-fizz-600: #836878;
  --color-grape-fizz-700: #695360;
  --color-grape-fizz-800: #4d3d47;
  --color-grape-fizz-900: #362a31;
  --color-grape-fizz-950: #21171d;
}

SCSS

$grape-fizz: #5a4050;
$grape-fizz-rgb: 90, 64, 80;
$grape-fizz-light: mix(#fff, $grape-fizz, 20%);
$grape-fizz-dark: mix(#000, $grape-fizz, 20%);

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