Burnt Olive

CSS

:root {
  --burnt-olive: #736f54;
  --burnt-olive-rgb: 115 111 84;
  --burnt-olive-oklch: oklch(0.538 0.04 100.6);
}

.element {
  color: var(--burnt-olive);
  background-color: hsl(52 16% 39%);
  border-color: oklch(0.538 0.04 100.6);
}

Tailwind CSS v4

@theme {
  --color-burnt-olive: #736f54;
  --color-burnt-olive-50: #f7f6e9;
  --color-burnt-olive-100: #eae9da;
  --color-burnt-olive-200: #d7d5c2;
  --color-burnt-olive-300: #bbb9a1;
  --color-burnt-olive-400: #a39f84;
  --color-burnt-olive-500: #8c8769;
  --color-burnt-olive-600: #767259;
  --color-burnt-olive-700: #5f5c47;
  --color-burnt-olive-800: #464333;
  --color-burnt-olive-900: #302e23;
  --color-burnt-olive-950: #1d1b12;
}

SCSS

$burnt-olive: #736f54;
$burnt-olive-rgb: 115, 111, 84;
$burnt-olive-light: mix(#fff, $burnt-olive, 20%);
$burnt-olive-dark: mix(#000, $burnt-olive, 20%);

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