Four Leaf Clover

CSS

:root {
  --four-leaf-clover: #738f5d;
  --four-leaf-clover-rgb: 115 143 93;
  --four-leaf-clover-oklch: oklch(0.615 0.079 132.1);
}

.element {
  color: var(--four-leaf-clover);
  background-color: hsl(94 21% 46%);
  border-color: oklch(0.615 0.079 132.1);
}

Tailwind CSS v4

@theme {
  --color-four-leaf-clover: #738f5d;
  --color-four-leaf-clover-50: #ecfbe4;
  --color-four-leaf-clover-100: #ddeed4;
  --color-four-leaf-clover-200: #c7dcba;
  --color-four-leaf-clover-300: #a7c198;
  --color-four-leaf-clover-400: #8da978;
  --color-four-leaf-clover-500: #73915a;
  --color-four-leaf-clover-600: #617b4d;
  --color-four-leaf-clover-700: #4d623d;
  --color-four-leaf-clover-800: #39482a;
  --color-four-leaf-clover-900: #27321d;
  --color-four-leaf-clover-950: #151e0d;
}

SCSS

$four-leaf-clover: #738f5d;
$four-leaf-clover-rgb: 115, 143, 93;
$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);
}