Clipped Grass

CSS

:root {
  --clipped-grass: #a1b841;
  --clipped-grass-rgb: 161 184 65;
  --clipped-grass-oklch: oklch(0.742 0.146 119.4);
}

.element {
  color: var(--clipped-grass);
  background-color: hsl(72 48% 49%);
  border-color: oklch(0.742 0.146 119.4);
}

Tailwind CSS v4

@theme {
  --color-clipped-grass: #a1b841;
  --color-clipped-grass-50: #eefcce;
  --color-clipped-grass-100: #e0f0ba;
  --color-clipped-grass-200: #cade98;
  --color-clipped-grass-300: #acc36c;
  --color-clipped-grass-400: #95aa3a;
  --color-clipped-grass-500: #7c9200;
  --color-clipped-grass-600: #697c00;
  --color-clipped-grass-700: #546300;
  --color-clipped-grass-800: #3f4800;
  --color-clipped-grass-900: #2b3200;
  --color-clipped-grass-950: #191e00;
}

SCSS

$clipped-grass: #a1b841;
$clipped-grass-rgb: 161, 184, 65;
$clipped-grass-light: mix(#fff, $clipped-grass, 20%);
$clipped-grass-dark: mix(#000, $clipped-grass, 20%);

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