Grey Wool

CSS

:root {
  --grey-wool: #a9bbbc;
  --grey-wool-rgb: 169 187 188;
  --grey-wool-oklch: oklch(0.779 0.02 200.8);
}

.element {
  color: var(--grey-wool);
  background-color: hsl(183 12% 70%);
  border-color: oklch(0.779 0.02 200.8);
}

Tailwind CSS v4

@theme {
  --color-grey-wool: #a9bbbc;
  --color-grey-wool-50: #eff7f8;
  --color-grey-wool-100: #e1eaeb;
  --color-grey-wool-200: #cbd7d8;
  --color-grey-wool-300: #acbbbc;
  --color-grey-wool-400: #92a2a3;
  --color-grey-wool-500: #778a8b;
  --color-grey-wool-600: #657576;
  --color-grey-wool-700: #515e5e;
  --color-grey-wool-800: #3b4545;
  --color-grey-wool-900: #282f30;
  --color-grey-wool-950: #161c1c;
}

SCSS

$grey-wool: #a9bbbc;
$grey-wool-rgb: 169, 187, 188;
$grey-wool-light: mix(#fff, $grey-wool, 20%);
$grey-wool-dark: mix(#000, $grey-wool, 20%);

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