Coyote Wild

CSS

:root {
  --coyote-wild: #ae9671;
  --coyote-wild-rgb: 174 150 113;
  --coyote-wild-oklch: oklch(0.685 0.058 78.3);
}

.element {
  color: var(--coyote-wild);
  background-color: hsl(36 27% 56%);
  border-color: oklch(0.685 0.058 78.3);
}

Tailwind CSS v4

@theme {
  --color-coyote-wild: #ae9671;
  --color-coyote-wild-50: #fef4e3;
  --color-coyote-wild-100: #f2e6d3;
  --color-coyote-wild-200: #e2d2b9;
  --color-coyote-wild-300: #c7b596;
  --color-coyote-wild-400: #b29b78;
  --color-coyote-wild-500: #9c8259;
  --color-coyote-wild-600: #846e4c;
  --color-coyote-wild-700: #69583d;
  --color-coyote-wild-800: #4e402b;
  --color-coyote-wild-900: #362c1d;
  --color-coyote-wild-950: #21190d;
}

SCSS

$coyote-wild: #ae9671;
$coyote-wild-rgb: 174, 150, 113;
$coyote-wild-light: mix(#fff, $coyote-wild, 20%);
$coyote-wild-dark: mix(#000, $coyote-wild, 20%);

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