Tree Pose

CSS

:root {
  --tree-pose: #bdc7bc;
  --tree-pose-rgb: 189 199 188;
  --tree-pose-oklch: oklch(0.819 0.019 142.8);
}

.element {
  color: var(--tree-pose);
  background-color: hsl(115 9% 76%);
  border-color: oklch(0.819 0.019 142.8);
}

Tailwind CSS v4

@theme {
  --color-tree-pose: #bdc7bc;
  --color-tree-pose-50: #f2f7f2;
  --color-tree-pose-100: #e4eae4;
  --color-tree-pose-200: #d0d6cf;
  --color-tree-pose-300: #b2bab2;
  --color-tree-pose-400: #98a197;
  --color-tree-pose-500: #7f8a7e;
  --color-tree-pose-600: #6c746b;
  --color-tree-pose-700: #565d55;
  --color-tree-pose-800: #3f443e;
  --color-tree-pose-900: #2b2f2b;
  --color-tree-pose-950: #191c18;
}

SCSS

$tree-pose: #bdc7bc;
$tree-pose-rgb: 189, 199, 188;
$tree-pose-light: mix(#fff, $tree-pose, 20%);
$tree-pose-dark: mix(#000, $tree-pose, 20%);

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