Leaps and Bounds

CSS

:root {
  --leaps-and-bounds: #6f803b;
  --leaps-and-bounds-rgb: 111 128 59;
  --leaps-and-bounds-oklch: oklch(0.57 0.096 121);
}

.element {
  color: var(--leaps-and-bounds);
  background-color: hsl(75 37% 37%);
  border-color: oklch(0.57 0.096 121);
}

Tailwind CSS v4

@theme {
  --color-leaps-and-bounds: #6f803b;
  --color-leaps-and-bounds-50: #f0fadc;
  --color-leaps-and-bounds-100: #e1eecb;
  --color-leaps-and-bounds-200: #ccdcae;
  --color-leaps-and-bounds-300: #aec089;
  --color-leaps-and-bounds-400: #96a765;
  --color-leaps-and-bounds-500: #7d9042;
  --color-leaps-and-bounds-600: #6a7a39;
  --color-leaps-and-bounds-700: #54612d;
  --color-leaps-and-bounds-800: #3f471e;
  --color-leaps-and-bounds-900: #2b3114;
  --color-leaps-and-bounds-950: #191d06;
}

SCSS

$leaps-and-bounds: #6f803b;
$leaps-and-bounds-rgb: 111, 128, 59;
$leaps-and-bounds-light: mix(#fff, $leaps-and-bounds, 20%);
$leaps-and-bounds-dark: mix(#000, $leaps-and-bounds, 20%);

.element {
  color: $leaps-and-bounds;
  box-shadow: 0 0 0 2px rgba($leaps-and-bounds, 0.35);
}