Willow Wood

CSS

:root {
  --willow-wood: #58504d;
  --willow-wood-rgb: 88 80 77;
  --willow-wood-oklch: oklch(0.438 0.012 41.8);
}

.element {
  color: var(--willow-wood);
  background-color: hsl(16 7% 32%);
  border-color: oklch(0.438 0.012 41.8);
}

Tailwind CSS v4

@theme {
  --color-willow-wood: #58504d;
  --color-willow-wood-50: #f8f4f2;
  --color-willow-wood-100: #ebe7e5;
  --color-willow-wood-200: #d9d3d0;
  --color-willow-wood-300: #bdb6b3;
  --color-willow-wood-400: #a59c99;
  --color-willow-wood-500: #8d8480;
  --color-willow-wood-600: #78706d;
  --color-willow-wood-700: #605957;
  --color-willow-wood-800: #46413f;
  --color-willow-wood-900: #312d2c;
  --color-willow-wood-950: #1d1a19;
}

SCSS

$willow-wood: #58504d;
$willow-wood-rgb: 88, 80, 77;
$willow-wood-light: mix(#fff, $willow-wood, 20%);
$willow-wood-dark: mix(#000, $willow-wood, 20%);

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