Burnished Bronze

CSS

:root {
  --burnished-bronze: #9c7e40;
  --burnished-bronze-rgb: 156 126 64;
  --burnished-bronze-oklch: oklch(0.608 0.089 83.8);
}

.element {
  color: var(--burnished-bronze);
  background-color: hsl(40 42% 43%);
  border-color: oklch(0.608 0.089 83.8);
}

Tailwind CSS v4

@theme {
  --color-burnished-bronze: #9c7e40;
  --color-burnished-bronze-50: #fff4d9;
  --color-burnished-bronze-100: #f5e6c7;
  --color-burnished-bronze-200: #e5d2aa;
  --color-burnished-bronze-300: #ccb583;
  --color-burnished-bronze-400: #b79a60;
  --color-burnished-bronze-500: #a2813a;
  --color-burnished-bronze-600: #896d33;
  --color-burnished-bronze-700: #6e5728;
  --color-burnished-bronze-800: #523f1b;
  --color-burnished-bronze-900: #392b12;
  --color-burnished-bronze-950: #231904;
}

SCSS

$burnished-bronze: #9c7e40;
$burnished-bronze-rgb: 156, 126, 64;
$burnished-bronze-light: mix(#fff, $burnished-bronze, 20%);
$burnished-bronze-dark: mix(#000, $burnished-bronze, 20%);

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