Union Springs

CSS

:root {
  --union-springs: #9c9680;
  --union-springs-rgb: 156 150 128;
  --union-springs-oklch: oklch(0.672 0.032 94.5);
}

.element {
  color: var(--union-springs);
  background-color: hsl(47 12% 56%);
  border-color: oklch(0.672 0.032 94.5);
}

Tailwind CSS v4

@theme {
  --color-union-springs: #9c9680;
  --color-union-springs-50: #f8f5eb;
  --color-union-springs-100: #ebe8dc;
  --color-union-springs-200: #d8d4c5;
  --color-union-springs-300: #bcb8a5;
  --color-union-springs-400: #a49f89;
  --color-union-springs-500: #8d866e;
  --color-union-springs-600: #77725e;
  --color-union-springs-700: #5f5b4b;
  --color-union-springs-800: #464236;
  --color-union-springs-900: #312e25;
  --color-union-springs-950: #1d1a13;
}

SCSS

$union-springs: #9c9680;
$union-springs-rgb: 156, 150, 128;
$union-springs-light: mix(#fff, $union-springs, 20%);
$union-springs-dark: mix(#000, $union-springs, 20%);

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