Mother Lode

CSS

:root {
  --mother-lode: #a28761;
  --mother-lode-rgb: 162 135 97;
  --mother-lode-oklch: oklch(0.639 0.062 75.7);
}

.element {
  color: var(--mother-lode);
  background-color: hsl(35 26% 51%);
  border-color: oklch(0.639 0.062 75.7);
}

Tailwind CSS v4

@theme {
  --color-mother-lode: #a28761;
  --color-mother-lode-50: #fff3e2;
  --color-mother-lode-100: #f4e6d1;
  --color-mother-lode-200: #e3d2b7;
  --color-mother-lode-300: #c9b494;
  --color-mother-lode-400: #b49a75;
  --color-mother-lode-500: #9e8157;
  --color-mother-lode-600: #866d4a;
  --color-mother-lode-700: #6b573b;
  --color-mother-lode-800: #4f3f2a;
  --color-mother-lode-900: #372c1c;
  --color-mother-lode-950: #22190c;
}

SCSS

$mother-lode: #a28761;
$mother-lode-rgb: 162, 135, 97;
$mother-lode-light: mix(#fff, $mother-lode, 20%);
$mother-lode-dark: mix(#000, $mother-lode, 20%);

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