Plum Green

CSS

:root {
  --plum-green: #695c39;
  --plum-green-rgb: 105 92 57;
  --plum-green-oklch: oklch(0.478 0.054 89.9);
}

.element {
  color: var(--plum-green);
  background-color: hsl(44 30% 32%);
  border-color: oklch(0.478 0.054 89.9);
}

Tailwind CSS v4

@theme {
  --color-plum-green: #695c39;
  --color-plum-green-50: #fbf5e4;
  --color-plum-green-100: #eee8d4;
  --color-plum-green-200: #dcd4bb;
  --color-plum-green-300: #c1b799;
  --color-plum-green-400: #ab9e7a;
  --color-plum-green-500: #94855d;
  --color-plum-green-600: #7d714f;
  --color-plum-green-700: #645a3f;
  --color-plum-green-800: #4a412d;
  --color-plum-green-900: #332d1e;
  --color-plum-green-950: #1f1a0e;
}

SCSS

$plum-green: #695c39;
$plum-green-rgb: 105, 92, 57;
$plum-green-light: mix(#fff, $plum-green, 20%);
$plum-green-dark: mix(#000, $plum-green, 20%);

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