Wild Boar

CSS

:root {
  --wild-boar: #553322;
  --wild-boar-rgb: 85 51 34;
  --wild-boar-oklch: oklch(0.358 0.057 46.9);
}

.element {
  color: var(--wild-boar);
  background-color: hsl(20 43% 23%);
  border-color: oklch(0.358 0.057 46.9);
}

Tailwind CSS v4

@theme {
  --color-wild-boar: #553322;
  --color-wild-boar-50: #fff1e7;
  --color-wild-boar-100: #f9e3d8;
  --color-wild-boar-200: #e9cec0;
  --color-wild-boar-300: #d0af9e;
  --color-wild-boar-400: #bb9582;
  --color-wild-boar-500: #a67b66;
  --color-wild-boar-600: #8c6857;
  --color-wild-boar-700: #715345;
  --color-wild-boar-800: #533c32;
  --color-wild-boar-900: #3a2922;
  --color-wild-boar-950: #241711;
}

SCSS

$wild-boar: #553322;
$wild-boar-rgb: 85, 51, 34;
$wild-boar-light: mix(#fff, $wild-boar, 20%);
$wild-boar-dark: mix(#000, $wild-boar, 20%);

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