Prune Plum

CSS

:root {
  --prune-plum: #211640;
  --prune-plum-rgb: 33 22 64;
  --prune-plum-oklch: oklch(0.241 0.077 291.7);
}

.element {
  color: var(--prune-plum);
  background-color: hsl(256 49% 17%);
  border-color: oklch(0.241 0.077 291.7);
}

Tailwind CSS v4

@theme {
  --color-prune-plum: #211640;
  --color-prune-plum-50: #f6f1ff;
  --color-prune-plum-100: #e9e4ff;
  --color-prune-plum-200: #d5cff3;
  --color-prune-plum-300: #b9b0dc;
  --color-prune-plum-400: #9f97c9;
  --color-prune-plum-500: #877db5;
  --color-prune-plum-600: #726a99;
  --color-prune-plum-700: #5b557b;
  --color-prune-plum-800: #423e5b;
  --color-prune-plum-900: #2d2b40;
  --color-prune-plum-950: #1a1829;
}

SCSS

$prune-plum: #211640;
$prune-plum-rgb: 33, 22, 64;
$prune-plum-light: mix(#fff, $prune-plum, 20%);
$prune-plum-dark: mix(#000, $prune-plum, 20%);

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