Snip of Parsley

CSS

:root {
  --snip-of-parsley: #718854;
  --snip-of-parsley-rgb: 113 136 84;
  --snip-of-parsley-oklch: oklch(0.595 0.079 128);
}

.element {
  color: var(--snip-of-parsley);
  background-color: hsl(87 24% 43%);
  border-color: oklch(0.595 0.079 128);
}

Tailwind CSS v4

@theme {
  --color-snip-of-parsley: #718854;
  --color-snip-of-parsley-50: #eefae3;
  --color-snip-of-parsley-100: #dfeed2;
  --color-snip-of-parsley-200: #c9dcb8;
  --color-snip-of-parsley-300: #aac095;
  --color-snip-of-parsley-400: #91a875;
  --color-snip-of-parsley-500: #779056;
  --color-snip-of-parsley-600: #657a4a;
  --color-snip-of-parsley-700: #50623a;
  --color-snip-of-parsley-800: #3b4729;
  --color-snip-of-parsley-900: #29311b;
  --color-snip-of-parsley-950: #171d0c;
}

SCSS

$snip-of-parsley: #718854;
$snip-of-parsley-rgb: 113, 136, 84;
$snip-of-parsley-light: mix(#fff, $snip-of-parsley, 20%);
$snip-of-parsley-dark: mix(#000, $snip-of-parsley, 20%);

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