Plum Savour

CSS

:root {
  --plum-savour: #915d88;
  --plum-savour-rgb: 145 93 136;
  --plum-savour-oklch: oklch(0.55 0.09 333.1);
}

.element {
  color: var(--plum-savour);
  background-color: hsl(310 22% 47%);
  border-color: oklch(0.55 0.09 333.1);
}

Tailwind CSS v4

@theme {
  --color-plum-savour: #915d88;
  --color-plum-savour-50: #ffecff;
  --color-plum-savour-100: #fcddf4;
  --color-plum-savour-200: #eec6e4;
  --color-plum-savour-300: #d5a6ca;
  --color-plum-savour-400: #bf8bb5;
  --color-plum-savour-500: #aa6fa0;
  --color-plum-savour-600: #905e87;
  --color-plum-savour-700: #734b6c;
  --color-plum-savour-800: #543751;
  --color-plum-savour-900: #3b2538;
  --color-plum-savour-950: #251423;
}

SCSS

$plum-savour: #915d88;
$plum-savour-rgb: 145, 93, 136;
$plum-savour-light: mix(#fff, $plum-savour, 20%);
$plum-savour-dark: mix(#000, $plum-savour, 20%);

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