Plum Harvest

CSS

:root {
  --plum-harvest: #674555;
  --plum-harvest-rgb: 103 69 85;
  --plum-harvest-oklch: oklch(0.434 0.052 349.7);
}

.element {
  color: var(--plum-harvest);
  background-color: hsl(332 20% 34%);
  border-color: oklch(0.434 0.052 349.7);
}

Tailwind CSS v4

@theme {
  --color-plum-harvest: #674555;
  --color-plum-harvest-50: #ffeff7;
  --color-plum-harvest-100: #f7e1ea;
  --color-plum-harvest-200: #e7ccd7;
  --color-plum-harvest-300: #ceadba;
  --color-plum-harvest-400: #b792a3;
  --color-plum-harvest-500: #a1788b;
  --color-plum-harvest-600: #886676;
  --color-plum-harvest-700: #6d515e;
  --color-plum-harvest-800: #503b46;
  --color-plum-harvest-900: #382930;
  --color-plum-harvest-950: #22161c;
}

SCSS

$plum-harvest: #674555;
$plum-harvest-rgb: 103, 69, 85;
$plum-harvest-light: mix(#fff, $plum-harvest, 20%);
$plum-harvest-dark: mix(#000, $plum-harvest, 20%);

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