Manzanilla Olive

CSS

:root {
  --manzanilla-olive: #9e8f6b;
  --manzanilla-olive-rgb: 158 143 107;
  --manzanilla-olive-oklch: oklch(0.654 0.053 88);
}

.element {
  color: var(--manzanilla-olive);
  background-color: hsl(42 21% 52%);
  border-color: oklch(0.654 0.053 88);
}

Tailwind CSS v4

@theme {
  --color-manzanilla-olive: #9e8f6b;
  --color-manzanilla-olive-50: #fbf5e4;
  --color-manzanilla-olive-100: #efe8d4;
  --color-manzanilla-olive-200: #ddd4bb;
  --color-manzanilla-olive-300: #c2b799;
  --color-manzanilla-olive-400: #ac9d7b;
  --color-manzanilla-olive-500: #95855d;
  --color-manzanilla-olive-600: #7e704f;
  --color-manzanilla-olive-700: #655a3f;
  --color-manzanilla-olive-800: #4b412d;
  --color-manzanilla-olive-900: #342d1e;
  --color-manzanilla-olive-950: #1f1a0e;
}

SCSS

$manzanilla-olive: #9e8f6b;
$manzanilla-olive-rgb: 158, 143, 107;
$manzanilla-olive-light: mix(#fff, $manzanilla-olive, 20%);
$manzanilla-olive-dark: mix(#000, $manzanilla-olive, 20%);

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