Old Prune

CSS

:root {
  --old-prune: #8272a4;
  --old-prune-rgb: 130 114 164;
  --old-prune-oklch: oklch(0.586 0.077 298.7);
}

.element {
  color: var(--old-prune);
  background-color: hsl(259 22% 55%);
  border-color: oklch(0.586 0.077 298.7);
}

Tailwind CSS v4

@theme {
  --color-old-prune: #8272a4;
  --color-old-prune-50: #f8f1ff;
  --color-old-prune-100: #ece3fe;
  --color-old-prune-200: #d9cdf1;
  --color-old-prune-300: #beafd9;
  --color-old-prune-400: #a495c6;
  --color-old-prune-500: #8d7bb3;
  --color-old-prune-600: #776897;
  --color-old-prune-700: #5f5379;
  --color-old-prune-800: #453d5a;
  --color-old-prune-900: #302a3f;
  --color-old-prune-950: #1c1728;
}

SCSS

$old-prune: #8272a4;
$old-prune-rgb: 130, 114, 164;
$old-prune-light: mix(#fff, $old-prune, 20%);
$old-prune-dark: mix(#000, $old-prune, 20%);

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