Inland

CSS

:root {
  --inland: #606b54;
  --inland-rgb: 96 107 84;
  --inland-oklch: oklch(0.512 0.038 128.5);
}

.element {
  color: var(--inland);
  background-color: hsl(89 12% 37%);
  border-color: oklch(0.512 0.038 128.5);
}

Tailwind CSS v4

@theme {
  --color-inland: #606b54;
  --color-inland-50: #f1f8ec;
  --color-inland-100: #e4ebde;
  --color-inland-200: #cfd8c7;
  --color-inland-300: #b1bca8;
  --color-inland-400: #98a38c;
  --color-inland-500: #7f8b71;
  --color-inland-600: #6b7660;
  --color-inland-700: #565e4c;
  --color-inland-800: #3f4537;
  --color-inland-900: #2b3025;
  --color-inland-950: #191c14;
}

SCSS

$inland: #606b54;
$inland-rgb: 96, 107, 84;
$inland-light: mix(#fff, $inland, 20%);
$inland-dark: mix(#000, $inland, 20%);

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