#6F9263

CSS

:root {
  --four-leaf-clover: #6f9263;
  --four-leaf-clover-rgb: 111 146 99;
  --four-leaf-clover-oklch: oklch(0.621 0.079 137.9);
}

.element {
  color: var(--four-leaf-clover);
  background-color: hsl(105 19% 48%);
  border-color: oklch(0.621 0.079 137.9);
}

Tailwind CSS v4

@theme {
  --color-four-leaf-clover: #6f9263;
  --color-four-leaf-clover-50: #eafbe6;
  --color-four-leaf-clover-100: #dbefd6;
  --color-four-leaf-clover-200: #c3ddbd;
  --color-four-leaf-clover-300: #a3c29c;
  --color-four-leaf-clover-400: #88aa7c;
  --color-four-leaf-clover-500: #6c935f;
  --color-four-leaf-clover-600: #5c7c51;
  --color-four-leaf-clover-700: #496340;
  --color-four-leaf-clover-800: #36492d;
  --color-four-leaf-clover-900: #25321e;
  --color-four-leaf-clover-950: #131e0e;
}

SCSS

$four-leaf-clover: #6f9263;
$four-leaf-clover-rgb: 111, 146, 99;
$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);
}