Downing Stone

CSS

:root {
  --downing-stone: #a6a397;
  --downing-stone-rgb: 166 163 151;
  --downing-stone-oklch: oklch(0.715 0.017 95.3);
}

.element {
  color: var(--downing-stone);
  background-color: hsl(48 8% 62%);
  border-color: oklch(0.715 0.017 95.3);
}

Tailwind CSS v4

@theme {
  --color-downing-stone: #a6a397;
  --color-downing-stone-50: #f6f5f0;
  --color-downing-stone-100: #e9e8e2;
  --color-downing-stone-200: #d6d4cc;
  --color-downing-stone-300: #bab8ae;
  --color-downing-stone-400: #a19f93;
  --color-downing-stone-500: #89867a;
  --color-downing-stone-600: #747267;
  --color-downing-stone-700: #5d5b52;
  --color-downing-stone-800: #44423c;
  --color-downing-stone-900: #2f2e29;
  --color-downing-stone-950: #1c1b17;
}

SCSS

$downing-stone: #a6a397;
$downing-stone-rgb: 166, 163, 151;
$downing-stone-light: mix(#fff, $downing-stone, 20%);
$downing-stone-dark: mix(#000, $downing-stone, 20%);

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