Olive Thrill

CSS

:root {
  --olive-thrill: #6d8e2c;
  --olive-thrill-rgb: 109 142 44;
  --olive-thrill-oklch: oklch(0.602 0.13 126.1);
}

.element {
  color: var(--olive-thrill);
  background-color: hsl(80 53% 36%);
  border-color: oklch(0.602 0.13 126.1);
}

Tailwind CSS v4

@theme {
  --color-olive-thrill: #6d8e2c;
  --color-olive-thrill-50: #eafdd5;
  --color-olive-thrill-100: #dbf1c3;
  --color-olive-thrill-200: #c4dfa4;
  --color-olive-thrill-300: #a4c47b;
  --color-olive-thrill-400: #8bac52;
  --color-olive-thrill-500: #709523;
  --color-olive-thrill-600: #5f7e21;
  --color-olive-thrill-700: #4c651a;
  --color-olive-thrill-800: #394a0e;
  --color-olive-thrill-900: #273309;
  --color-olive-thrill-950: #151f00;
}

SCSS

$olive-thrill: #6d8e2c;
$olive-thrill-rgb: 109, 142, 44;
$olive-thrill-light: mix(#fff, $olive-thrill, 20%);
$olive-thrill-dark: mix(#000, $olive-thrill, 20%);

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