Weeping Willow

CSS

:root {
  --weeping-willow: #b3b17b;
  --weeping-willow-rgb: 179 177 123;
  --weeping-willow-oklch: oklch(0.749 0.073 106.2);
}

.element {
  color: var(--weeping-willow);
  background-color: hsl(58 27% 59%);
  border-color: oklch(0.749 0.073 106.2);
}

Tailwind CSS v4

@theme {
  --color-weeping-willow: #b3b17b;
  --color-weeping-willow-50: #f7f7e0;
  --color-weeping-willow-100: #eaeacf;
  --color-weeping-willow-200: #d7d7b4;
  --color-weeping-willow-300: #babb90;
  --color-weeping-willow-400: #a3a26f;
  --color-weeping-willow-500: #8c894f;
  --color-weeping-willow-600: #767443;
  --color-weeping-willow-700: #5f5d36;
  --color-weeping-willow-800: #464425;
  --color-weeping-willow-900: #312f19;
  --color-weeping-willow-950: #1d1b0a;
}

SCSS

$weeping-willow: #b3b17b;
$weeping-willow-rgb: 179, 177, 123;
$weeping-willow-light: mix(#fff, $weeping-willow, 20%);
$weeping-willow-dark: mix(#000, $weeping-willow, 20%);

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