#D17E32

CSS

:root {
  --polished-bronze: #d17e32;
  --polished-bronze-rgb: 209 126 50;
  --polished-bronze-oklch: oklch(0.669 0.135 59.1);
}

.element {
  color: var(--polished-bronze);
  background-color: hsl(29 63% 51%);
  border-color: oklch(0.669 0.135 59.1);
}

Tailwind CSS v4

@theme {
  --color-polished-bronze: #d17e32;
  --color-polished-bronze-50: #ffedcf;
  --color-polished-bronze-100: #ffdebb;
  --color-polished-bronze-200: #ffc799;
  --color-polished-bronze-300: #eaa76d;
  --color-polished-bronze-400: #d98944;
  --color-polished-bronze-500: #c66c00;
  --color-polished-bronze-600: #a75b05;
  --color-polished-bronze-700: #864906;
  --color-polished-bronze-800: #643405;
  --color-polished-bronze-900: #472304;
  --color-polished-bronze-950: #2e1200;
}

SCSS

$polished-bronze: #d17e32;
$polished-bronze-rgb: 209, 126, 50;
$polished-bronze-light: mix(#fff, $polished-bronze, 20%);
$polished-bronze-dark: mix(#000, $polished-bronze, 20%);

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