Young Grass

CSS

:root {
  --young-grass: #c3d825;
  --young-grass-rgb: 195 216 37;
  --young-grass-oklch: oklch(0.838 0.185 116.8);
}

.element {
  color: var(--young-grass);
  background-color: hsl(67 71% 50%);
  border-color: oklch(0.838 0.185 116.8);
}

Tailwind CSS v4

@theme {
  --color-young-grass: #c3d825;
  --color-young-grass-50: #effdc2;
  --color-young-grass-100: #e1f1ab;
  --color-young-grass-200: #cce083;
  --color-young-grass-300: #aec44b;
  --color-young-grass-400: #99ab00;
  --color-young-grass-500: #819200;
  --color-young-grass-600: #6d7c00;
  --color-young-grass-700: #576300;
  --color-young-grass-800: #424800;
  --color-young-grass-900: #2d3200;
  --color-young-grass-950: #1a1e00;
}

SCSS

$young-grass: #c3d825;
$young-grass-rgb: 195, 216, 37;
$young-grass-light: mix(#fff, $young-grass, 20%);
$young-grass-dark: mix(#000, $young-grass, 20%);

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