Nature Lover

CSS

:root {
  --nature-lover: #6c7763;
  --nature-lover-rgb: 108 119 99;
  --nature-lover-oklch: oklch(0.554 0.033 131);
}

.element {
  color: var(--nature-lover);
  background-color: hsl(93 9% 43%);
  border-color: oklch(0.554 0.033 131);
}

Tailwind CSS v4

@theme {
  --color-nature-lover: #6c7763;
  --color-nature-lover-50: #f1f7ee;
  --color-nature-lover-100: #e4eadf;
  --color-nature-lover-200: #cfd7c9;
  --color-nature-lover-300: #b1bbaa;
  --color-nature-lover-400: #98a38f;
  --color-nature-lover-500: #7f8b74;
  --color-nature-lover-600: #6b7663;
  --color-nature-lover-700: #565e4f;
  --color-nature-lover-800: #3f4539;
  --color-nature-lover-900: #2b3027;
  --color-nature-lover-950: #191c15;
}

SCSS

$nature-lover: #6c7763;
$nature-lover-rgb: 108, 119, 99;
$nature-lover-light: mix(#fff, $nature-lover, 20%);
$nature-lover-dark: mix(#000, $nature-lover, 20%);

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