#1D6F3A

CSS

:root {
  --bucolic: #1d6f3a;
  --bucolic-rgb: 29 111 58;
  --bucolic-oklch: oklch(0.48 0.114 150.9);
}

.element {
  color: var(--bucolic);
  background-color: hsl(141 59% 27%);
  border-color: oklch(0.48 0.114 150.9);
}

Tailwind CSS v4

@theme {
  --color-bucolic: #1d6f3a;
  --color-bucolic-50: #deffe6;
  --color-bucolic-100: #ccf4d6;
  --color-bucolic-200: #b0e3bd;
  --color-bucolic-300: #8ac99c;
  --color-bucolic-400: #69b27b;
  --color-bucolic-500: #439b5e;
  --color-bucolic-600: #3a8350;
  --color-bucolic-700: #2e693f;
  --color-bucolic-800: #224d2c;
  --color-bucolic-900: #17361d;
  --color-bucolic-950: #07210d;
}

SCSS

$bucolic: #1d6f3a;
$bucolic-rgb: 29, 111, 58;
$bucolic-light: mix(#fff, $bucolic, 20%);
$bucolic-dark: mix(#000, $bucolic, 20%);

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