Tree Line

CSS

:root {
  --tree-line: #c3db8d;
  --tree-line-rgb: 195 219 141;
  --tree-line-oklch: oklch(0.855 0.105 122.5);
}

.element {
  color: var(--tree-line);
  background-color: hsl(78 52% 71%);
  border-color: oklch(0.855 0.105 122.5);
}

Tailwind CSS v4

@theme {
  --color-tree-line: #c3db8d;
  --color-tree-line-50: #eefbda;
  --color-tree-line-100: #e0efc9;
  --color-tree-line-200: #caddac;
  --color-tree-line-300: #abc186;
  --color-tree-line-400: #93a961;
  --color-tree-line-500: #7a913c;
  --color-tree-line-600: #677b34;
  --color-tree-line-700: #526229;
  --color-tree-line-800: #3d481b;
  --color-tree-line-900: #2a3211;
  --color-tree-line-950: #181e04;
}

SCSS

$tree-line: #c3db8d;
$tree-line-rgb: 195, 219, 141;
$tree-line-light: mix(#fff, $tree-line, 20%);
$tree-line-dark: mix(#000, $tree-line, 20%);

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