#036B32

CSS

:root {
  --bucolic: #036b32;
  --bucolic-rgb: 3 107 50;
  --bucolic-oklch: oklch(0.462 0.123 151);
}

.element {
  color: var(--bucolic);
  background-color: hsl(147 95% 22%);
  border-color: oklch(0.462 0.123 151);
}

Tailwind CSS v4

@theme {
  --color-bucolic: #036b32;
  --color-bucolic-50: #dcffe5;
  --color-bucolic-100: #caf5d5;
  --color-bucolic-200: #ace4bc;
  --color-bucolic-300: #85ca9a;
  --color-bucolic-400: #63b378;
  --color-bucolic-500: #3a9d5a;
  --color-bucolic-600: #33844d;
  --color-bucolic-700: #296a3d;
  --color-bucolic-800: #1e4e2a;
  --color-bucolic-900: #14361c;
  --color-bucolic-950: #05210c;
}

SCSS

$bucolic: #036b32;
$bucolic-rgb: 3, 107, 50;
$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);
}