Grass Is Greener

CSS

:root {
  --grass-is-greener: #3f9b0b;
  --grass-is-greener-rgb: 63 155 11;
  --grass-is-greener-oklch: oklch(0.61 0.185 138.2);
}

.element {
  color: var(--grass-is-greener);
  background-color: hsl(98 87% 33%);
  border-color: oklch(0.61 0.185 138.2);
}

Tailwind CSS v4

@theme {
  --color-grass-is-greener: #3f9b0b;
  --color-grass-is-greener-50: #d9ffd1;
  --color-grass-is-greener-100: #c7f8bd;
  --color-grass-is-greener-200: #a9e89c;
  --color-grass-is-greener-300: #81ce71;
  --color-grass-is-greener-400: #61b740;
  --color-grass-is-greener-500: #37a000;
  --color-grass-is-greener-600: #318800;
  --color-grass-is-greener-700: #276d00;
  --color-grass-is-greener-800: #1f5000;
  --color-grass-is-greener-900: #143700;
  --color-grass-is-greener-950: #062200;
}

SCSS

$grass-is-greener: #3f9b0b;
$grass-is-greener-rgb: 63, 155, 11;
$grass-is-greener-light: mix(#fff, $grass-is-greener, 20%);
$grass-is-greener-dark: mix(#000, $grass-is-greener, 20%);

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