Astroturf

CSS

:root {
  --astroturf: #67a159;
  --astroturf-rgb: 103 161 89;
  --astroturf-oklch: oklch(0.651 0.119 139.7);
}

.element {
  color: var(--astroturf);
  background-color: hsl(108 29% 49%);
  border-color: oklch(0.651 0.119 139.7);
}

Tailwind CSS v4

@theme {
  --color-astroturf: #67a159;
  --color-astroturf-50: #e3fedf;
  --color-astroturf-100: #d2f3ce;
  --color-astroturf-200: #b8e2b2;
  --color-astroturf-300: #95c78e;
  --color-astroturf-400: #78b06b;
  --color-astroturf-500: #599949;
  --color-astroturf-600: #4c813f;
  --color-astroturf-700: #3c6832;
  --color-astroturf-800: #2d4c21;
  --color-astroturf-900: #1e3516;
  --color-astroturf-950: #0e2007;
}

SCSS

$astroturf: #67a159;
$astroturf-rgb: 103, 161, 89;
$astroturf-light: mix(#fff, $astroturf, 20%);
$astroturf-dark: mix(#000, $astroturf, 20%);

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