Grass Blade

CSS

:root {
  --grass-blade: #636f46;
  --grass-blade-rgb: 99 111 70;
  --grass-blade-oklch: oklch(0.521 0.062 121.9);
}

.element {
  color: var(--grass-blade);
  background-color: hsl(78 23% 35%);
  border-color: oklch(0.521 0.062 121.9);
}

Tailwind CSS v4

@theme {
  --color-grass-blade: #636f46;
  --color-grass-blade-50: #f1f9e5;
  --color-grass-blade-100: #e3ecd5;
  --color-grass-blade-200: #ced9bc;
  --color-grass-blade-300: #b1bd9b;
  --color-grass-blade-400: #98a57c;
  --color-grass-blade-500: #7f8d5e;
  --color-grass-blade-600: #6c7750;
  --color-grass-blade-700: #565f40;
  --color-grass-blade-800: #3f462d;
  --color-grass-blade-900: #2c301e;
  --color-grass-blade-950: #191c0e;
}

SCSS

$grass-blade: #636f46;
$grass-blade-rgb: 99, 111, 70;
$grass-blade-light: mix(#fff, $grass-blade, 20%);
$grass-blade-dark: mix(#000, $grass-blade, 20%);

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