Glossy Olive

CSS

:root {
  --glossy-olive: #636340;
  --glossy-olive-rgb: 99 99 64;
  --glossy-olive-oklch: oklch(0.49 0.052 108.2);
}

.element {
  color: var(--glossy-olive);
  background-color: hsl(60 21% 32%);
  border-color: oklch(0.49 0.052 108.2);
}

Tailwind CSS v4

@theme {
  --color-glossy-olive: #636340;
  --color-glossy-olive-50: #f6f7e6;
  --color-glossy-olive-100: #e8ead6;
  --color-glossy-olive-200: #d5d7be;
  --color-glossy-olive-300: #b8ba9c;
  --color-glossy-olive-400: #a1a17e;
  --color-glossy-olive-500: #898961;
  --color-glossy-olive-600: #747452;
  --color-glossy-olive-700: #5d5d42;
  --color-glossy-olive-800: #44442f;
  --color-glossy-olive-900: #2f2f20;
  --color-glossy-olive-950: #1c1b0f;
}

SCSS

$glossy-olive: #636340;
$glossy-olive-rgb: 99, 99, 64;
$glossy-olive-light: mix(#fff, $glossy-olive, 20%);
$glossy-olive-dark: mix(#000, $glossy-olive, 20%);

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