Spruce Stone

CSS

:root {
  --spruce-stone: #9fc09c;
  --spruce-stone-rgb: 159 192 156;
  --spruce-stone-oklch: oklch(0.774 0.062 142.8);
}

.element {
  color: var(--spruce-stone);
  background-color: hsl(115 22% 68%);
  border-color: oklch(0.774 0.062 142.8);
}

Tailwind CSS v4

@theme {
  --color-spruce-stone: #9fc09c;
  --color-spruce-stone-50: #ebfaea;
  --color-spruce-stone-100: #dceedb;
  --color-spruce-stone-200: #c5dcc4;
  --color-spruce-stone-300: #a5c0a4;
  --color-spruce-stone-400: #8aa887;
  --color-spruce-stone-500: #6e916b;
  --color-spruce-stone-600: #5e7b5b;
  --color-spruce-stone-700: #4b6249;
  --color-spruce-stone-800: #374834;
  --color-spruce-stone-900: #253223;
  --color-spruce-stone-950: #141e12;
}

SCSS

$spruce-stone: #9fc09c;
$spruce-stone-rgb: 159, 192, 156;
$spruce-stone-light: mix(#fff, $spruce-stone, 20%);
$spruce-stone-dark: mix(#000, $spruce-stone, 20%);

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