Weeping Fig

CSS

:root {
  --weeping-fig: #5d8727;
  --weeping-fig-rgb: 93 135 39;
  --weeping-fig-oklch: oklch(0.573 0.133 130.2);
}

.element {
  color: var(--weeping-fig);
  background-color: hsl(86 55% 34%);
  border-color: oklch(0.573 0.133 130.2);
}

Tailwind CSS v4

@theme {
  --color-weeping-fig: #5d8727;
  --color-weeping-fig-50: #e7fed7;
  --color-weeping-fig-100: #d8f2c4;
  --color-weeping-fig-200: #bfe1a6;
  --color-weeping-fig-300: #9ec67e;
  --color-weeping-fig-400: #84ae56;
  --color-weeping-fig-500: #68972a;
  --color-weeping-fig-600: #588026;
  --color-weeping-fig-700: #46661e;
  --color-weeping-fig-800: #354b11;
  --color-weeping-fig-900: #24340b;
  --color-weeping-fig-950: #131f01;
}

SCSS

$weeping-fig: #5d8727;
$weeping-fig-rgb: 93, 135, 39;
$weeping-fig-light: mix(#fff, $weeping-fig, 20%);
$weeping-fig-dark: mix(#000, $weeping-fig, 20%);

.element {
  color: $weeping-fig;
  box-shadow: 0 0 0 2px rgba($weeping-fig, 0.35);
}