Always Greener Grass

CSS

:root {
  --always-greener-grass: #11aa00;
  --always-greener-grass-rgb: 17 170 0;
  --always-greener-grass-oklch: oklch(0.641 0.216 142.1);
}

.element {
  color: var(--always-greener-grass);
  background-color: hsl(114 100% 33%);
  border-color: oklch(0.641 0.216 142.1);
}

Tailwind CSS v4

@theme {
  --color-always-greener-grass: #11aa00;
  --color-always-greener-grass-50: #d0ffce;
  --color-always-greener-grass-100: #bcfbba;
  --color-always-greener-grass-200: #99ec98;
  --color-always-greener-grass-300: #69d36b;
  --color-always-greener-grass-400: #3ebc34;
  --color-always-greener-grass-500: #00a600;
  --color-always-greener-grass-600: #008c00;
  --color-always-greener-grass-700: #007000;
  --color-always-greener-grass-800: #015200;
  --color-always-greener-grass-900: #023900;
  --color-always-greener-grass-950: #002300;
}

SCSS

$always-greener-grass: #11aa00;
$always-greener-grass-rgb: 17, 170, 0;
$always-greener-grass-light: mix(#fff, $always-greener-grass, 20%);
$always-greener-grass-dark: mix(#000, $always-greener-grass, 20%);

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