Olive Sand

CSS

:root {
  --olive-sand: #9abf8d;
  --olive-sand-rgb: 154 191 141;
  --olive-sand-oklch: oklch(0.764 0.08 137.7);
}

.element {
  color: var(--olive-sand);
  background-color: hsl(104 28% 65%);
  border-color: oklch(0.764 0.08 137.7);
}

Tailwind CSS v4

@theme {
  --color-olive-sand: #9abf8d;
  --color-olive-sand-50: #eafbe6;
  --color-olive-sand-100: #daefd6;
  --color-olive-sand-200: #c3ddbd;
  --color-olive-sand-300: #a2c29b;
  --color-olive-sand-400: #88aa7b;
  --color-olive-sand-500: #6c935e;
  --color-olive-sand-600: #5c7c50;
  --color-olive-sand-700: #496340;
  --color-olive-sand-800: #36492c;
  --color-olive-sand-900: #25321e;
  --color-olive-sand-950: #131e0e;
}

SCSS

$olive-sand: #9abf8d;
$olive-sand-rgb: 154, 191, 141;
$olive-sand-light: mix(#fff, $olive-sand, 20%);
$olive-sand-dark: mix(#000, $olive-sand, 20%);

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