Backcountry

CSS

:root {
  --backcountry: #7c725f;
  --backcountry-rgb: 124 114 95;
  --backcountry-oklch: oklch(0.556 0.031 83.5);
}

.element {
  color: var(--backcountry);
  background-color: hsl(39 13% 43%);
  border-color: oklch(0.556 0.031 83.5);
}

Tailwind CSS v4

@theme {
  --color-backcountry: #7c725f;
  --color-backcountry-50: #f9f5eb;
  --color-backcountry-100: #ece7dd;
  --color-backcountry-200: #dad4c6;
  --color-backcountry-300: #bfb7a6;
  --color-backcountry-400: #a79d8a;
  --color-backcountry-500: #90856f;
  --color-backcountry-600: #7a705e;
  --color-backcountry-700: #625a4b;
  --color-backcountry-800: #484136;
  --color-backcountry-900: #322d25;
  --color-backcountry-950: #1e1a14;
}

SCSS

$backcountry: #7c725f;
$backcountry-rgb: 124, 114, 95;
$backcountry-light: mix(#fff, $backcountry, 20%);
$backcountry-dark: mix(#000, $backcountry, 20%);

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