Silver Blue

CSS

:root {
  --silver-blue: #8a9a9a;
  --silver-blue-rgb: 138 154 154;
  --silver-blue-oklch: oklch(0.674 0.018 196.7);
}

.element {
  color: var(--silver-blue);
  background-color: hsl(180 7% 57%);
  border-color: oklch(0.674 0.018 196.7);
}

Tailwind CSS v4

@theme {
  --color-silver-blue: #8a9a9a;
  --color-silver-blue-50: #eff7f7;
  --color-silver-blue-100: #e1eaea;
  --color-silver-blue-200: #ccd7d7;
  --color-silver-blue-300: #adbabb;
  --color-silver-blue-400: #93a2a2;
  --color-silver-blue-500: #798a8a;
  --color-silver-blue-600: #667575;
  --color-silver-blue-700: #525d5d;
  --color-silver-blue-800: #3b4444;
  --color-silver-blue-900: #292f2f;
  --color-silver-blue-950: #171c1c;
}

SCSS

$silver-blue: #8a9a9a;
$silver-blue-rgb: 138, 154, 154;
$silver-blue-light: mix(#fff, $silver-blue, 20%);
$silver-blue-dark: mix(#000, $silver-blue, 20%);

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