Dark Pewter

CSS

:root {
  --dark-pewter: #606865;
  --dark-pewter-rgb: 96 104 101;
  --dark-pewter-oklch: oklch(0.509 0.011 171.5);
}

.element {
  color: var(--dark-pewter);
  background-color: hsl(157 4% 39%);
  border-color: oklch(0.509 0.011 171.5);
}

Tailwind CSS v4

@theme {
  --color-dark-pewter: #606865;
  --color-dark-pewter-50: #f2f6f5;
  --color-dark-pewter-100: #e4e9e7;
  --color-dark-pewter-200: #d0d6d4;
  --color-dark-pewter-300: #b2b9b7;
  --color-dark-pewter-400: #98a19d;
  --color-dark-pewter-500: #7f8985;
  --color-dark-pewter-600: #6c7471;
  --color-dark-pewter-700: #565c5a;
  --color-dark-pewter-800: #3f4442;
  --color-dark-pewter-900: #2b2f2d;
  --color-dark-pewter-950: #191b1a;
}

SCSS

$dark-pewter: #606865;
$dark-pewter-rgb: 96, 104, 101;
$dark-pewter-light: mix(#fff, $dark-pewter, 20%);
$dark-pewter-dark: mix(#000, $dark-pewter, 20%);

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