Crushed Grape

CSS

:root {
  --crushed-grape: #835a88;
  --crushed-grape-rgb: 131 90 136;
  --crushed-grape-oklch: oklch(0.528 0.085 322.9);
}

.element {
  color: var(--crushed-grape);
  background-color: hsl(293 20% 44%);
  border-color: oklch(0.528 0.085 322.9);
}

Tailwind CSS v4

@theme {
  --color-crushed-grape: #835a88;
  --color-crushed-grape-50: #ffedff;
  --color-crushed-grape-100: #f7dff8;
  --color-crushed-grape-200: #e8c8e9;
  --color-crushed-grape-300: #cea9d0;
  --color-crushed-grape-400: #b78ebc;
  --color-crushed-grape-500: #a173a7;
  --color-crushed-grape-600: #88618d;
  --color-crushed-grape-700: #6d4e71;
  --color-crushed-grape-800: #503854;
  --color-crushed-grape-900: #38273b;
  --color-crushed-grape-950: #221525;
}

SCSS

$crushed-grape: #835a88;
$crushed-grape-rgb: 131, 90, 136;
$crushed-grape-light: mix(#fff, $crushed-grape, 20%);
$crushed-grape-dark: mix(#000, $crushed-grape, 20%);

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