#BC6734

CSS

:root {
  --dwarven-bronze: #bc6734;
  --dwarven-bronze-rgb: 188 103 52;
  --dwarven-bronze-oklch: oklch(0.602 0.127 49.3);
}

.element {
  color: var(--dwarven-bronze);
  background-color: hsl(22 57% 47%);
  border-color: oklch(0.602 0.127 49.3);
}

Tailwind CSS v4

@theme {
  --color-dwarven-bronze: #bc6734;
  --color-dwarven-bronze-50: #ffecd5;
  --color-dwarven-bronze-100: #ffddc2;
  --color-dwarven-bronze-200: #ffc5a3;
  --color-dwarven-bronze-300: #eca57b;
  --color-dwarven-bronze-400: #da8757;
  --color-dwarven-bronze-500: #c7692e;
  --color-dwarven-bronze-600: #a85929;
  --color-dwarven-bronze-700: #874720;
  --color-dwarven-bronze-800: #653317;
  --color-dwarven-bronze-900: #47230f;
  --color-dwarven-bronze-950: #2e1103;
}

SCSS

$dwarven-bronze: #bc6734;
$dwarven-bronze-rgb: 188, 103, 52;
$dwarven-bronze-light: mix(#fff, $dwarven-bronze, 20%);
$dwarven-bronze-dark: mix(#000, $dwarven-bronze, 20%);

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