Fistfull of Green

CSS

:root {
  --fistfull-of-green: #a2a415;
  --fistfull-of-green-rgb: 162 164 21;
  --fistfull-of-green-oklch: oklch(0.694 0.147 110.6);
}

.element {
  color: var(--fistfull-of-green);
  background-color: hsl(61 77% 36%);
  border-color: oklch(0.694 0.147 110.6);
}

Tailwind CSS v4

@theme {
  --color-fistfull-of-green: #a2a415;
  --color-fistfull-of-green-50: #f5faca;
  --color-fistfull-of-green-100: #e8eeb5;
  --color-fistfull-of-green-200: #d5db91;
  --color-fistfull-of-green-300: #b8bf62;
  --color-fistfull-of-green-400: #a3a629;
  --color-fistfull-of-green-500: #8c8d00;
  --color-fistfull-of-green-600: #777700;
  --color-fistfull-of-green-700: #5f6000;
  --color-fistfull-of-green-800: #474500;
  --color-fistfull-of-green-900: #313000;
  --color-fistfull-of-green-950: #1e1c00;
}

SCSS

$fistfull-of-green: #a2a415;
$fistfull-of-green-rgb: 162, 164, 21;
$fistfull-of-green-light: mix(#fff, $fistfull-of-green, 20%);
$fistfull-of-green-dark: mix(#000, $fistfull-of-green, 20%);

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