Wood’s Creek

CSS

:root {
  --wood-s-creek: #61633f;
  --wood-s-creek-rgb: 97 99 63;
  --wood-s-creek-oklch: oklch(0.488 0.054 110.9);
}

.element {
  color: var(--wood-s-creek);
  background-color: hsl(63 22% 32%);
  border-color: oklch(0.488 0.054 110.9);
}

Tailwind CSS v4

@theme {
  --color-wood-s-creek: #61633f;
  --color-wood-s-creek-50: #f5f7e6;
  --color-wood-s-creek-100: #e8ead6;
  --color-wood-s-creek-200: #d4d7bd;
  --color-wood-s-creek-300: #b7bb9c;
  --color-wood-s-creek-400: #9fa27d;
  --color-wood-s-creek-500: #878a60;
  --color-wood-s-creek-600: #737552;
  --color-wood-s-creek-700: #5c5d41;
  --color-wood-s-creek-800: #44442e;
  --color-wood-s-creek-900: #2f2f1f;
  --color-wood-s-creek-950: #1b1c0f;
}

SCSS

$wood-s-creek: #61633f;
$wood-s-creek-rgb: 97, 99, 63;
$wood-s-creek-light: mix(#fff, $wood-s-creek, 20%);
$wood-s-creek-dark: mix(#000, $wood-s-creek, 20%);

.element {
  color: $wood-s-creek;
  box-shadow: 0 0 0 2px rgba($wood-s-creek, 0.35);
}