Tree Shade

CSS

:root {
  --tree-shade: #476a30;
  --tree-shade-rgb: 71 106 48;
  --tree-shade-oklch: oklch(0.483 0.095 134.4);
}

.element {
  color: var(--tree-shade);
  background-color: hsl(96 38% 30%);
  border-color: oklch(0.483 0.095 134.4);
}

Tailwind CSS v4

@theme {
  --color-tree-shade: #476a30;
  --color-tree-shade-50: #e9fce1;
  --color-tree-shade-100: #daf0d1;
  --color-tree-shade-200: #c2deb6;
  --color-tree-shade-300: #a1c393;
  --color-tree-shade-400: #87ab72;
  --color-tree-shade-500: #6b9452;
  --color-tree-shade-600: #5b7d46;
  --color-tree-shade-700: #496437;
  --color-tree-shade-800: #364926;
  --color-tree-shade-900: #253319;
  --color-tree-shade-950: #131e0a;
}

SCSS

$tree-shade: #476a30;
$tree-shade-rgb: 71, 106, 48;
$tree-shade-light: mix(#fff, $tree-shade, 20%);
$tree-shade-dark: mix(#000, $tree-shade, 20%);

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