Grass Court

CSS

:root {
  --grass-court: #088d46;
  --grass-court-rgb: 8 141 70;
  --grass-court-oklch: oklch(0.564 0.148 151.5);
}

.element {
  color: var(--grass-court);
  background-color: hsl(148 89% 29%);
  border-color: oklch(0.564 0.148 151.5);
}

Tailwind CSS v4

@theme {
  --color-grass-court: #088d46;
  --color-grass-court-50: #d6ffe2;
  --color-grass-court-100: #c3f7d1;
  --color-grass-court-200: #a2e7b7;
  --color-grass-court-300: #77ce94;
  --color-grass-court-400: #50b771;
  --color-grass-court-500: #0aa050;
  --color-grass-court-600: #128845;
  --color-grass-court-700: #106d37;
  --color-grass-court-800: #0f5024;
  --color-grass-court-900: #0a3818;
  --color-grass-court-950: #002209;
}

SCSS

$grass-court: #088d46;
$grass-court-rgb: 8, 141, 70;
$grass-court-light: mix(#fff, $grass-court, 20%);
$grass-court-dark: mix(#000, $grass-court, 20%);

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