Old Four Leaf Clover

CSS

:root {
  --old-four-leaf-clover: #757d43;
  --old-four-leaf-clover-rgb: 117 125 67;
  --old-four-leaf-clover-oklch: oklch(0.569 0.081 115.5);
}

.element {
  color: var(--old-four-leaf-clover);
  background-color: hsl(68 30% 38%);
  border-color: oklch(0.569 0.081 115.5);
}

Tailwind CSS v4

@theme {
  --color-old-four-leaf-clover: #757d43;
  --color-old-four-leaf-clover-50: #f3f9df;
  --color-old-four-leaf-clover-100: #e5ecce;
  --color-old-four-leaf-clover-200: #d1d9b2;
  --color-old-four-leaf-clover-300: #b4bd8e;
  --color-old-four-leaf-clover-400: #9ca56d;
  --color-old-four-leaf-clover-500: #848d4b;
  --color-old-four-leaf-clover-600: #707741;
  --color-old-four-leaf-clover-700: #595f33;
  --color-old-four-leaf-clover-800: #424523;
  --color-old-four-leaf-clover-900: #2e3017;
  --color-old-four-leaf-clover-950: #1a1c08;
}

SCSS

$old-four-leaf-clover: #757d43;
$old-four-leaf-clover-rgb: 117, 125, 67;
$old-four-leaf-clover-light: mix(#fff, $old-four-leaf-clover, 20%);
$old-four-leaf-clover-dark: mix(#000, $old-four-leaf-clover, 20%);

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