#885831

CSS

:root {
  --precious-copper: #885831;
  --precious-copper-rgb: 136 88 49;
  --precious-copper-oklch: oklch(0.505 0.083 58.4);
}

.element {
  color: var(--precious-copper);
  background-color: hsl(27 47% 36%);
  border-color: oklch(0.505 0.083 58.4);
}

Tailwind CSS v4

@theme {
  --color-precious-copper: #885831;
  --color-precious-copper-50: #fff0de;
  --color-precious-copper-100: #fee2cd;
  --color-precious-copper-200: #f0cdb1;
  --color-precious-copper-300: #d8ae8c;
  --color-precious-copper-400: #c4926d;
  --color-precious-copper-500: #b0784c;
  --color-precious-copper-600: #946641;
  --color-precious-copper-700: #775134;
  --color-precious-copper-800: #583b25;
  --color-precious-copper-900: #3e2818;
  --color-precious-copper-950: #271609;
}

SCSS

$precious-copper: #885831;
$precious-copper-rgb: 136, 88, 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);
}