Hunting Jacket

CSS

:root {
  --hunting-jacket: #856829;
  --hunting-jacket-rgb: 133 104 41;
  --hunting-jacket-oklch: oklch(0.534 0.088 83.9);
}

.element {
  color: var(--hunting-jacket);
  background-color: hsl(41 53% 34%);
  border-color: oklch(0.534 0.088 83.9);
}

Tailwind CSS v4

@theme {
  --color-hunting-jacket: #856829;
  --color-hunting-jacket-50: #fff4d9;
  --color-hunting-jacket-100: #f5e6c7;
  --color-hunting-jacket-200: #e5d2aa;
  --color-hunting-jacket-300: #ccb583;
  --color-hunting-jacket-400: #b79a60;
  --color-hunting-jacket-500: #a2813b;
  --color-hunting-jacket-600: #896d33;
  --color-hunting-jacket-700: #6e5728;
  --color-hunting-jacket-800: #523f1c;
  --color-hunting-jacket-900: #392c12;
  --color-hunting-jacket-950: #231905;
}

SCSS

$hunting-jacket: #856829;
$hunting-jacket-rgb: 133, 104, 41;
$hunting-jacket-light: mix(#fff, $hunting-jacket, 20%);
$hunting-jacket-dark: mix(#000, $hunting-jacket, 20%);

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