Purple Plum

CSS

:root {
  --purple-plum: #9c51b6;
  --purple-plum-rgb: 156 81 182;
  --purple-plum-oklch: oklch(0.567 0.166 316.7);
}

.element {
  color: var(--purple-plum);
  background-color: hsl(285 41% 52%);
  border-color: oklch(0.567 0.166 316.7);
}

Tailwind CSS v4

@theme {
  --color-purple-plum: #9c51b6;
  --color-purple-plum-50: #ffe7ff;
  --color-purple-plum-100: #ffd7ff;
  --color-purple-plum-200: #f3beff;
  --color-purple-plum-300: #db9bee;
  --color-purple-plum-400: #c57cdf;
  --color-purple-plum-500: #b05cce;
  --color-purple-plum-600: #954fae;
  --color-purple-plum-700: #783f8b;
  --color-purple-plum-800: #572d69;
  --color-purple-plum-900: #3d1f4a;
  --color-purple-plum-950: #260e31;
}

SCSS

$purple-plum: #9c51b6;
$purple-plum-rgb: 156, 81, 182;
$purple-plum-light: mix(#fff, $purple-plum, 20%);
$purple-plum-dark: mix(#000, $purple-plum, 20%);

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