Mossy Bronze

CSS

:root {
  --mossy-bronze: #525f48;
  --mossy-bronze-rgb: 82 95 72;
  --mossy-bronze-oklch: oklch(0.467 0.039 131.8);
}

.element {
  color: var(--mossy-bronze);
  background-color: hsl(94 14% 33%);
  border-color: oklch(0.467 0.039 131.8);
}

Tailwind CSS v4

@theme {
  --color-mossy-bronze: #525f48;
  --color-mossy-bronze-50: #f1f8ec;
  --color-mossy-bronze-100: #e3ebde;
  --color-mossy-bronze-200: #cdd8c7;
  --color-mossy-bronze-300: #afbca8;
  --color-mossy-bronze-400: #96a48c;
  --color-mossy-bronze-500: #7d8c71;
  --color-mossy-bronze-600: #6a7660;
  --color-mossy-bronze-700: #545f4c;
  --color-mossy-bronze-800: #3e4537;
  --color-mossy-bronze-900: #2b3025;
  --color-mossy-bronze-950: #181c14;
}

SCSS

$mossy-bronze: #525f48;
$mossy-bronze-rgb: 82, 95, 72;
$mossy-bronze-light: mix(#fff, $mossy-bronze, 20%);
$mossy-bronze-dark: mix(#000, $mossy-bronze, 20%);

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