#477653

CSS

:root {
  --parsley-sprig: #477653;
  --parsley-sprig-rgb: 71 118 83;
  --parsley-sprig-oklch: oklch(0.522 0.076 151.2);
}

.element {
  color: var(--parsley-sprig);
  background-color: hsl(135 25% 37%);
  border-color: oklch(0.522 0.076 151.2);
}

Tailwind CSS v4

@theme {
  --color-parsley-sprig: #477653;
  --color-parsley-sprig-50: #e6fceb;
  --color-parsley-sprig-100: #d6f0dc;
  --color-parsley-sprig-200: #bddec5;
  --color-parsley-sprig-300: #9ac3a5;
  --color-parsley-sprig-400: #7dac88;
  --color-parsley-sprig-500: #5f956d;
  --color-parsley-sprig-600: #517e5c;
  --color-parsley-sprig-700: #416549;
  --color-parsley-sprig-800: #2f4a34;
  --color-parsley-sprig-900: #203323;
  --color-parsley-sprig-950: #0f1f12;
}

SCSS

$parsley-sprig: #477653;
$parsley-sprig-rgb: 71, 118, 83;
$parsley-sprig-light: mix(#fff, $parsley-sprig, 20%);
$parsley-sprig-dark: mix(#000, $parsley-sprig, 20%);

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