Clear Plum

CSS

:root {
  --clear-plum: #64005e;
  --clear-plum-rgb: 100 0 94;
  --clear-plum-oklch: oklch(0.349 0.158 331.5);
}

.element {
  color: var(--clear-plum);
  background-color: hsl(304 100% 20%);
  border-color: oklch(0.349 0.158 331.5);
}

Tailwind CSS v4

@theme {
  --color-clear-plum: #64005e;
  --color-clear-plum-50: #ffe5ff;
  --color-clear-plum-100: #ffd5fe;
  --color-clear-plum-200: #febbf1;
  --color-clear-plum-300: #e898d9;
  --color-clear-plum-400: #d379c8;
  --color-clear-plum-500: #bf58b5;
  --color-clear-plum-600: #a14b99;
  --color-clear-plum-700: #823c7a;
  --color-clear-plum-800: #5f2b5c;
  --color-clear-plum-900: #431d41;
  --color-clear-plum-950: #2b0c29;
}

SCSS

$clear-plum: #64005e;
$clear-plum-rgb: 100, 0, 94;
$clear-plum-light: mix(#fff, $clear-plum, 20%);
$clear-plum-dark: mix(#000, $clear-plum, 20%);

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