Out of Plumb

CSS

:root {
  --out-of-plumb: #9c909c;
  --out-of-plumb-rgb: 156 144 156;
  --out-of-plumb-oklch: oklch(0.668 0.022 325.8);
}

.element {
  color: var(--out-of-plumb);
  background-color: hsl(300 6% 59%);
  border-color: oklch(0.668 0.022 325.8);
}

Tailwind CSS v4

@theme {
  --color-out-of-plumb: #9c909c;
  --color-out-of-plumb-50: #f9f3f8;
  --color-out-of-plumb-100: #ece5ec;
  --color-out-of-plumb-200: #dad1d9;
  --color-out-of-plumb-300: #beb4bd;
  --color-out-of-plumb-400: #a69aa6;
  --color-out-of-plumb-500: #8e818e;
  --color-out-of-plumb-600: #786d78;
  --color-out-of-plumb-700: #605760;
  --color-out-of-plumb-800: #464047;
  --color-out-of-plumb-900: #312c31;
  --color-out-of-plumb-950: #1d191d;
}

SCSS

$out-of-plumb: #9c909c;
$out-of-plumb-rgb: 156, 144, 156;
$out-of-plumb-light: mix(#fff, $out-of-plumb, 20%);
$out-of-plumb-dark: mix(#000, $out-of-plumb, 20%);

.element {
  color: $out-of-plumb;
  box-shadow: 0 0 0 2px rgba($out-of-plumb, 0.35);
}