Wild Plum

CSS

:root {
  --wild-plum: #83455d;
  --wild-plum-rgb: 131 69 93;
  --wild-plum-oklch: oklch(0.474 0.09 356.5);
}

.element {
  color: var(--wild-plum);
  background-color: hsl(337 31% 39%);
  border-color: oklch(0.474 0.09 356.5);
}

Tailwind CSS v4

@theme {
  --color-wild-plum: #83455d;
  --color-wild-plum-50: #ffebf5;
  --color-wild-plum-100: #ffdce7;
  --color-wild-plum-200: #f6c5d4;
  --color-wild-plum-300: #dea5b7;
  --color-wild-plum-400: #ca88a0;
  --color-wild-plum-500: #b56c87;
  --color-wild-plum-600: #995c73;
  --color-wild-plum-700: #7b495c;
  --color-wild-plum-800: #5b3544;
  --color-wild-plum-900: #3f242f;
  --color-wild-plum-950: #28131c;
}

SCSS

$wild-plum: #83455d;
$wild-plum-rgb: 131, 69, 93;
$wild-plum-light: mix(#fff, $wild-plum, 20%);
$wild-plum-dark: mix(#000, $wild-plum, 20%);

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