Mill Creek

CSS

:root {
  --mill-creek: #876e59;
  --mill-creek-rgb: 135 110 89;
  --mill-creek-oklch: oklch(0.557 0.044 61.7);
}

.element {
  color: var(--mill-creek);
  background-color: hsl(27 21% 44%);
  border-color: oklch(0.557 0.044 61.7);
}

Tailwind CSS v4

@theme {
  --color-mill-creek: #876e59;
  --color-mill-creek-50: #fff3e8;
  --color-mill-creek-100: #f3e5d9;
  --color-mill-creek-200: #e2d1c1;
  --color-mill-creek-300: #c8b3a0;
  --color-mill-creek-400: #b29984;
  --color-mill-creek-500: #9c8068;
  --color-mill-creek-600: #846c59;
  --color-mill-creek-700: #6a5747;
  --color-mill-creek-800: #4e3f33;
  --color-mill-creek-900: #362b23;
  --color-mill-creek-950: #211912;
}

SCSS

$mill-creek: #876e59;
$mill-creek-rgb: 135, 110, 89;
$mill-creek-light: mix(#fff, $mill-creek, 20%);
$mill-creek-dark: mix(#000, $mill-creek, 20%);

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