Plum Dandy

CSS

:root {
  --plum-dandy: #8b6878;
  --plum-dandy-rgb: 139 104 120;
  --plum-dandy-oklch: oklch(0.558 0.05 349.7);
}

.element {
  color: var(--plum-dandy);
  background-color: hsl(333 14% 48%);
  border-color: oklch(0.558 0.05 349.7);
}

Tailwind CSS v4

@theme {
  --color-plum-dandy: #8b6878;
  --color-plum-dandy-50: #fff0f7;
  --color-plum-dandy-100: #f6e1ea;
  --color-plum-dandy-200: #e6ccd6;
  --color-plum-dandy-300: #cdadba;
  --color-plum-dandy-400: #b693a3;
  --color-plum-dandy-500: #a0798b;
  --color-plum-dandy-600: #886676;
  --color-plum-dandy-700: #6d525e;
  --color-plum-dandy-800: #503b45;
  --color-plum-dandy-900: #382930;
  --color-plum-dandy-950: #22171c;
}

SCSS

$plum-dandy: #8b6878;
$plum-dandy-rgb: 139, 104, 120;
$plum-dandy-light: mix(#fff, $plum-dandy, 20%);
$plum-dandy-dark: mix(#000, $plum-dandy, 20%);

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