Camouflage Olive

CSS

:root {
  --camouflage-olive: #a28f5c;
  --camouflage-olive-rgb: 162 143 92;
  --camouflage-olive-oklch: oklch(0.655 0.073 89.8);
}

.element {
  color: var(--camouflage-olive);
  background-color: hsl(44 28% 50%);
  border-color: oklch(0.655 0.073 89.8);
}

Tailwind CSS v4

@theme {
  --color-camouflage-olive: #a28f5c;
  --color-camouflage-olive-50: #fcf5de;
  --color-camouflage-olive-100: #f0e8cd;
  --color-camouflage-olive-200: #dfd4b2;
  --color-camouflage-olive-300: #c5b78d;
  --color-camouflage-olive-400: #af9d6c;
  --color-camouflage-olive-500: #99844b;
  --color-camouflage-olive-600: #817041;
  --color-camouflage-olive-700: #685933;
  --color-camouflage-olive-800: #4d4124;
  --color-camouflage-olive-900: #352d18;
  --color-camouflage-olive-950: #211a09;
}

SCSS

$camouflage-olive: #a28f5c;
$camouflage-olive-rgb: 162, 143, 92;
$camouflage-olive-light: mix(#fff, $camouflage-olive, 20%);
$camouflage-olive-dark: mix(#000, $camouflage-olive, 20%);

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