#B76D2D

CSS

:root {
  --brown-alpaca: #b76d2d;
  --brown-alpaca-rgb: 183 109 45;
  --brown-alpaca-oklch: oklch(0.605 0.122 57.9);
}

.element {
  color: var(--brown-alpaca);
  background-color: hsl(28 61% 45%);
  border-color: oklch(0.605 0.122 57.9);
}

Tailwind CSS v4

@theme {
  --color-brown-alpaca: #b76d2d;
  --color-brown-alpaca-50: #ffeed3;
  --color-brown-alpaca-100: #ffdfc0;
  --color-brown-alpaca-200: #fcc9a0;
  --color-brown-alpaca-300: #e6a977;
  --color-brown-alpaca-400: #d48b51;
  --color-brown-alpaca-500: #c16f23;
  --color-brown-alpaca-600: #a35e21;
  --color-brown-alpaca-700: #834b1a;
  --color-brown-alpaca-800: #623612;
  --color-brown-alpaca-900: #45250b;
  --color-brown-alpaca-950: #2c1301;
}

SCSS

$brown-alpaca: #b76d2d;
$brown-alpaca-rgb: 183, 109, 45;
$brown-alpaca-light: mix(#fff, $brown-alpaca, 20%);
$brown-alpaca-dark: mix(#000, $brown-alpaca, 20%);

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