Growing Nature

CSS

:root {
  --growing-nature: #88cc11;
  --growing-nature-rgb: 136 204 17;
  --growing-nature-oklch: oklch(0.77 0.204 129.9);
}

.element {
  color: var(--growing-nature);
  background-color: hsl(82 85% 43%);
  border-color: oklch(0.77 0.204 129.9);
}

Tailwind CSS v4

@theme {
  --color-growing-nature: #88cc11;
  --color-growing-nature-50: #e0ffc6;
  --color-growing-nature-100: #cff7b0;
  --color-growing-nature-200: #b4e789;
  --color-growing-nature-300: #90cc56;
  --color-growing-nature-400: #75b400;
  --color-growing-nature-500: #569d00;
  --color-growing-nature-600: #498500;
  --color-growing-nature-700: #3a6a00;
  --color-growing-nature-800: #2d4e00;
  --color-growing-nature-900: #1f3600;
  --color-growing-nature-950: #0e2100;
}

SCSS

$growing-nature: #88cc11;
$growing-nature-rgb: 136, 204, 17;
$growing-nature-light: mix(#fff, $growing-nature, 20%);
$growing-nature-dark: mix(#000, $growing-nature, 20%);

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