Wild Manzanita

CSS

:root {
  --wild-manzanita: #684944;
  --wild-manzanita-rgb: 104 73 68;
  --wild-manzanita-oklch: oklch(0.438 0.044 29.2);
}

.element {
  color: var(--wild-manzanita);
  background-color: hsl(8 21% 34%);
  border-color: oklch(0.438 0.044 29.2);
}

Tailwind CSS v4

@theme {
  --color-wild-manzanita: #684944;
  --color-wild-manzanita-50: #fff1ee;
  --color-wild-manzanita-100: #f6e3df;
  --color-wild-manzanita-200: #e6cec9;
  --color-wild-manzanita-300: #cdb0aa;
  --color-wild-manzanita-400: #b79590;
  --color-wild-manzanita-500: #a17c76;
  --color-wild-manzanita-600: #886964;
  --color-wild-manzanita-700: #6d5450;
  --color-wild-manzanita-800: #513d3a;
  --color-wild-manzanita-900: #382a28;
  --color-wild-manzanita-950: #231716;
}

SCSS

$wild-manzanita: #684944;
$wild-manzanita-rgb: 104, 73, 68;
$wild-manzanita-light: mix(#fff, $wild-manzanita, 20%);
$wild-manzanita-dark: mix(#000, $wild-manzanita, 20%);

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