#688F60

CSS

:root {
  --four-leaf-clover: #688f60;
  --four-leaf-clover-rgb: 104 143 96;
  --four-leaf-clover-oklch: oklch(0.608 0.082 140.3);
}

.element {
  color: var(--four-leaf-clover);
  background-color: hsl(110 20% 47%);
  border-color: oklch(0.608 0.082 140.3);
}

Tailwind CSS v4

@theme {
  --color-four-leaf-clover: #688f60;
  --color-four-leaf-clover-50: #e8fce6;
  --color-four-leaf-clover-100: #d9efd6;
  --color-four-leaf-clover-200: #c1debe;
  --color-four-leaf-clover-300: #a0c39c;
  --color-four-leaf-clover-400: #85ab7d;
  --color-four-leaf-clover-500: #689460;
  --color-four-leaf-clover-600: #597d51;
  --color-four-leaf-clover-700: #476441;
  --color-four-leaf-clover-800: #34492d;
  --color-four-leaf-clover-900: #23331f;
  --color-four-leaf-clover-950: #121e0e;
}

SCSS

$four-leaf-clover: #688f60;
$four-leaf-clover-rgb: 104, 143, 96;
$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);
}