Woodchuck

CSS

:root {
  --woodchuck: #8e746c;
  --woodchuck-rgb: 142 116 108;
  --woodchuck-oklch: oklch(0.582 0.035 37.8);
}

.element {
  color: var(--woodchuck);
  background-color: hsl(14 14% 49%);
  border-color: oklch(0.582 0.035 37.8);
}

Tailwind CSS v4

@theme {
  --color-woodchuck: #8e746c;
  --color-woodchuck-50: #fff2ee;
  --color-woodchuck-100: #f3e4df;
  --color-woodchuck-200: #e2d0c9;
  --color-woodchuck-300: #c8b2aa;
  --color-woodchuck-400: #b29890;
  --color-woodchuck-500: #9c7f76;
  --color-woodchuck-600: #846b64;
  --color-woodchuck-700: #695650;
  --color-woodchuck-800: #4e3e3a;
  --color-woodchuck-900: #362b28;
  --color-woodchuck-950: #211816;
}

SCSS

$woodchuck: #8e746c;
$woodchuck-rgb: 142, 116, 108;
$woodchuck-light: mix(#fff, $woodchuck, 20%);
$woodchuck-dark: mix(#000, $woodchuck, 20%);

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