#6B8C5C

CSS

:root {
  --four-leaf-clover: #6b8c5c;
  --four-leaf-clover-rgb: 107 140 92;
  --four-leaf-clover-oklch: oklch(0.602 0.079 136.2);
}

.element {
  color: var(--four-leaf-clover);
  background-color: hsl(101 21% 45%);
  border-color: oklch(0.602 0.079 136.2);
}

Tailwind CSS v4

@theme {
  --color-four-leaf-clover: #6b8c5c;
  --color-four-leaf-clover-50: #eafbe5;
  --color-four-leaf-clover-100: #dbefd5;
  --color-four-leaf-clover-200: #c4ddbc;
  --color-four-leaf-clover-300: #a4c29a;
  --color-four-leaf-clover-400: #89aa7b;
  --color-four-leaf-clover-500: #6e925d;
  --color-four-leaf-clover-600: #5d7c4f;
  --color-four-leaf-clover-700: #4a633f;
  --color-four-leaf-clover-800: #37492c;
  --color-four-leaf-clover-900: #25321e;
  --color-four-leaf-clover-950: #141e0e;
}

SCSS

$four-leaf-clover: #6b8c5c;
$four-leaf-clover-rgb: 107, 140, 92;
$four-leaf-clover-light: mix(#fff, $four-leaf-clover, 20%);
$four-leaf-clover-dark: mix(#000, $four-leaf-clover, 20%);

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