Patch of Land

CSS

:root {
  --patch-of-land: #225511;
  --patch-of-land-rgb: 34 85 17;
  --patch-of-land-oklch: oklch(0.399 0.112 139.2);
}

.element {
  color: var(--patch-of-land);
  background-color: hsl(105 67% 20%);
  border-color: oklch(0.399 0.112 139.2);
}

Tailwind CSS v4

@theme {
  --color-patch-of-land: #225511;
  --color-patch-of-land-50: #e4fee0;
  --color-patch-of-land-100: #d4f2cf;
  --color-patch-of-land-200: #bae1b4;
  --color-patch-of-land-300: #98c690;
  --color-patch-of-land-400: #7baf6e;
  --color-patch-of-land-500: #5d984d;
  --color-patch-of-land-600: #4f8042;
  --color-patch-of-land-700: #3f6734;
  --color-patch-of-land-800: #2f4b23;
  --color-patch-of-land-900: #203417;
  --color-patch-of-land-950: #0f2008;
}

SCSS

$patch-of-land: #225511;
$patch-of-land-rgb: 34, 85, 17;
$patch-of-land-light: mix(#fff, $patch-of-land, 20%);
$patch-of-land-dark: mix(#000, $patch-of-land, 20%);

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