Zucchini Cream

CSS

:root {
  --zucchini-cream: #97a98b;
  --zucchini-cream-rgb: 151 169 139;
  --zucchini-cream-oklch: oklch(0.712 0.047 132.9);
}

.element {
  color: var(--zucchini-cream);
  background-color: hsl(96 15% 60%);
  border-color: oklch(0.712 0.047 132.9);
}

Tailwind CSS v4

@theme {
  --color-zucchini-cream: #97a98b;
  --color-zucchini-cream-50: #eff8eb;
  --color-zucchini-cream-100: #e1ecdc;
  --color-zucchini-cream-200: #ccd9c5;
  --color-zucchini-cream-300: #adbda5;
  --color-zucchini-cream-400: #94a588;
  --color-zucchini-cream-500: #7a8d6d;
  --color-zucchini-cream-600: #67775d;
  --color-zucchini-cream-700: #53604a;
  --color-zucchini-cream-800: #3d4635;
  --color-zucchini-cream-900: #2a3024;
  --color-zucchini-cream-950: #171d13;
}

SCSS

$zucchini-cream: #97a98b;
$zucchini-cream-rgb: 151, 169, 139;
$zucchini-cream-light: mix(#fff, $zucchini-cream, 20%);
$zucchini-cream-dark: mix(#000, $zucchini-cream, 20%);

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