#8A5B31

CSS

:root {
  --precious-copper: #8a5b31;
  --precious-copper-rgb: 138 91 49;
  --precious-copper-oklch: oklch(0.513 0.084 60.9);
}

.element {
  color: var(--precious-copper);
  background-color: hsl(28 48% 37%);
  border-color: oklch(0.513 0.084 60.9);
}

Tailwind CSS v4

@theme {
  --color-precious-copper: #8a5b31;
  --color-precious-copper-50: #fff1dd;
  --color-precious-copper-100: #fde2cc;
  --color-precious-copper-200: #efcdb0;
  --color-precious-copper-300: #d7af8b;
  --color-precious-copper-400: #c3936b;
  --color-precious-copper-500: #af7949;
  --color-precious-copper-600: #94663f;
  --color-precious-copper-700: #765232;
  --color-precious-copper-800: #583b24;
  --color-precious-copper-900: #3e2818;
  --color-precious-copper-950: #271609;
}

SCSS

$precious-copper: #8a5b31;
$precious-copper-rgb: 138, 91, 49;
$precious-copper-light: mix(#fff, $precious-copper, 20%);
$precious-copper-dark: mix(#000, $precious-copper, 20%);

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