Wisteria-Wise

CSS

:root {
  --wisteria-wise: #b2a7cc;
  --wisteria-wise-rgb: 178 167 204;
  --wisteria-wise-oklch: oklch(0.75 0.054 298.7);
}

.element {
  color: var(--wisteria-wise);
  background-color: hsl(258 27% 73%);
  border-color: oklch(0.75 0.054 298.7);
}

Tailwind CSS v4

@theme {
  --color-wisteria-wise: #b2a7cc;
  --color-wisteria-wise-50: #f7f2ff;
  --color-wisteria-wise-100: #eae4f8;
  --color-wisteria-wise-200: #d8cfe8;
  --color-wisteria-wise-300: #bcb2cf;
  --color-wisteria-wise-400: #a298ba;
  --color-wisteria-wise-500: #8b7fa5;
  --color-wisteria-wise-600: #756b8c;
  --color-wisteria-wise-700: #5e5670;
  --color-wisteria-wise-800: #443f53;
  --color-wisteria-wise-900: #2f2b3a;
  --color-wisteria-wise-950: #1c1824;
}

SCSS

$wisteria-wise: #b2a7cc;
$wisteria-wise-rgb: 178, 167, 204;
$wisteria-wise-light: mix(#fff, $wisteria-wise, 20%);
$wisteria-wise-dark: mix(#000, $wisteria-wise, 20%);

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