Night on the Moors

CSS

:root {
  --night-on-the-moors: #898487;
  --night-on-the-moors-rgb: 137 132 135;
  --night-on-the-moors-oklch: oklch(0.619 0.007 340.5);
}

.element {
  color: var(--night-on-the-moors);
  background-color: hsl(324 2% 53%);
  border-color: oklch(0.619 0.007 340.5);
}

Tailwind CSS v4

@theme {
  --color-night-on-the-moors: #898487;
  --color-night-on-the-moors-50: #f7f4f6;
  --color-night-on-the-moors-100: #eae7e8;
  --color-night-on-the-moors-200: #d7d3d5;
  --color-night-on-the-moors-300: #bab6b8;
  --color-night-on-the-moors-400: #a29da0;
  --color-night-on-the-moors-500: #8a8488;
  --color-night-on-the-moors-600: #757073;
  --color-night-on-the-moors-700: #5d595c;
  --color-night-on-the-moors-800: #444143;
  --color-night-on-the-moors-900: #2f2d2e;
  --color-night-on-the-moors-950: #1c1a1b;
}

SCSS

$night-on-the-moors: #898487;
$night-on-the-moors-rgb: 137, 132, 135;
$night-on-the-moors-light: mix(#fff, $night-on-the-moors, 20%);
$night-on-the-moors-dark: mix(#000, $night-on-the-moors, 20%);

.element {
  color: $night-on-the-moors;
  box-shadow: 0 0 0 2px rgba($night-on-the-moors, 0.35);
}