Prune Purple

CSS

:root {
  --prune-purple: #6c445b;
  --prune-purple-rgb: 108 68 91;
  --prune-purple-oklch: oklch(0.441 0.064 344.6);
}

.element {
  color: var(--prune-purple);
  background-color: hsl(326 23% 35%);
  border-color: oklch(0.441 0.064 344.6);
}

Tailwind CSS v4

@theme {
  --color-prune-purple: #6c445b;
  --color-prune-purple-50: #ffeef9;
  --color-prune-purple-100: #f9e0ec;
  --color-prune-purple-200: #eacada;
  --color-prune-purple-300: #d1abbe;
  --color-prune-purple-400: #bb90a7;
  --color-prune-purple-500: #a57590;
  --color-prune-purple-600: #8c637a;
  --color-prune-purple-700: #704f62;
  --color-prune-purple-800: #523a48;
  --color-prune-purple-900: #392732;
  --color-prune-purple-950: #24151e;
}

SCSS

$prune-purple: #6c445b;
$prune-purple-rgb: 108, 68, 91;
$prune-purple-light: mix(#fff, $prune-purple, 20%);
$prune-purple-dark: mix(#000, $prune-purple, 20%);

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