Middle Ditch

CSS

:root {
  --middle-ditch: #7c6942;
  --middle-ditch-rgb: 124 105 66;
  --middle-ditch-oklch: oklch(0.529 0.06 84.5);
}

.element {
  color: var(--middle-ditch);
  background-color: hsl(40 31% 37%);
  border-color: oklch(0.529 0.06 84.5);
}

Tailwind CSS v4

@theme {
  --color-middle-ditch: #7c6942;
  --color-middle-ditch-50: #fdf4e2;
  --color-middle-ditch-100: #f1e7d2;
  --color-middle-ditch-200: #e0d3b8;
  --color-middle-ditch-300: #c5b695;
  --color-middle-ditch-400: #af9c76;
  --color-middle-ditch-500: #998357;
  --color-middle-ditch-600: #816f4a;
  --color-middle-ditch-700: #68593b;
  --color-middle-ditch-800: #4d412a;
  --color-middle-ditch-900: #352c1c;
  --color-middle-ditch-950: #20190c;
}

SCSS

$middle-ditch: #7c6942;
$middle-ditch-rgb: 124, 105, 66;
$middle-ditch-light: mix(#fff, $middle-ditch, 20%);
$middle-ditch-dark: mix(#000, $middle-ditch, 20%);

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