Hillsbrad Grass

CSS

:root {
  --hillsbrad-grass: #7fa91f;
  --hillsbrad-grass-rgb: 127 169 31;
  --hillsbrad-grass-oklch: oklch(0.68 0.163 126.1);
}

.element {
  color: var(--hillsbrad-grass);
  background-color: hsl(78 69% 39%);
  border-color: oklch(0.68 0.163 126.1);
}

Tailwind CSS v4

@theme {
  --color-hillsbrad-grass: #7fa91f;
  --color-hillsbrad-grass-50: #e8ffcd;
  --color-hillsbrad-grass-100: #d8f3b9;
  --color-hillsbrad-grass-200: #c0e296;
  --color-hillsbrad-grass-300: #9fc769;
  --color-hillsbrad-grass-400: #86af34;
  --color-hillsbrad-grass-500: #6b9700;
  --color-hillsbrad-grass-600: #5b8000;
  --color-hillsbrad-grass-700: #486700;
  --color-hillsbrad-grass-800: #374b00;
  --color-hillsbrad-grass-900: #253400;
  --color-hillsbrad-grass-950: #141f00;
}

SCSS

$hillsbrad-grass: #7fa91f;
$hillsbrad-grass-rgb: 127, 169, 31;
$hillsbrad-grass-light: mix(#fff, $hillsbrad-grass, 20%);
$hillsbrad-grass-dark: mix(#000, $hillsbrad-grass, 20%);

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