Stone Silver

CSS

:root {
  --stone-silver: #8ba8ae;
  --stone-silver-rgb: 139 168 174;
  --stone-silver-oklch: oklch(0.712 0.033 211.6);
}

.element {
  color: var(--stone-silver);
  background-color: hsl(190 18% 61%);
  border-color: oklch(0.712 0.033 211.6);
}

Tailwind CSS v4

@theme {
  --color-stone-silver: #8ba8ae;
  --color-stone-silver-50: #ebf8fb;
  --color-stone-silver-100: #dcebef;
  --color-stone-silver-200: #c5d8dd;
  --color-stone-silver-300: #a5bcc2;
  --color-stone-silver-400: #89a4aa;
  --color-stone-silver-500: #6d8c93;
  --color-stone-silver-600: #5d777c;
  --color-stone-silver-700: #4a5f63;
  --color-stone-silver-800: #354649;
  --color-stone-silver-900: #243032;
  --color-stone-silver-950: #131c1e;
}

SCSS

$stone-silver: #8ba8ae;
$stone-silver-rgb: 139, 168, 174;
$stone-silver-light: mix(#fff, $stone-silver, 20%);
$stone-silver-dark: mix(#000, $stone-silver, 20%);

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