#779463

CSS

:root {
  --four-leaf-clover: #779463;
  --four-leaf-clover-rgb: 119 148 99;
  --four-leaf-clover-oklch: oklch(0.631 0.078 133.1);
}

.element {
  color: var(--four-leaf-clover);
  background-color: hsl(96 20% 48%);
  border-color: oklch(0.631 0.078 133.1);
}

Tailwind CSS v4

@theme {
  --color-four-leaf-clover: #779463;
  --color-four-leaf-clover-50: #ecfbe4;
  --color-four-leaf-clover-100: #ddeed4;
  --color-four-leaf-clover-200: #c6dcbb;
  --color-four-leaf-clover-300: #a6c199;
  --color-four-leaf-clover-400: #8ca979;
  --color-four-leaf-clover-500: #72915b;
  --color-four-leaf-clover-600: #607b4e;
  --color-four-leaf-clover-700: #4d623e;
  --color-four-leaf-clover-800: #39482b;
  --color-four-leaf-clover-900: #27321d;
  --color-four-leaf-clover-950: #151e0d;
}

SCSS

$four-leaf-clover: #779463;
$four-leaf-clover-rgb: 119, 148, 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);
}