#B0A7B0

CSS

:root {
  --foggy-plum: #b0a7b0;
  --foggy-plum-rgb: 176 167 176;
  --foggy-plum-oklch: oklch(0.739 0.016 325.7);
}

.element {
  color: var(--foggy-plum);
  background-color: hsl(300 5% 67%);
  border-color: oklch(0.739 0.016 325.7);
}

Tailwind CSS v4

@theme {
  --color-foggy-plum: #b0a7b0;
  --color-foggy-plum-50: #f8f3f7;
  --color-foggy-plum-100: #ebe6eb;
  --color-foggy-plum-200: #d8d2d8;
  --color-foggy-plum-300: #bcb5bc;
  --color-foggy-plum-400: #a49ba4;
  --color-foggy-plum-500: #8c838c;
  --color-foggy-plum-600: #766f77;
  --color-foggy-plum-700: #5f585f;
  --color-foggy-plum-800: #454146;
  --color-foggy-plum-900: #302c30;
  --color-foggy-plum-950: #1c1a1c;
}

SCSS

$foggy-plum: #b0a7b0;
$foggy-plum-rgb: 176, 167, 176;
$foggy-plum-light: mix(#fff, $foggy-plum, 20%);
$foggy-plum-dark: mix(#000, $foggy-plum, 20%);

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