#AFA7B1

CSS

:root {
  --foggy-plum: #afa7b1;
  --foggy-plum-rgb: 175 167 177;
  --foggy-plum-oklch: oklch(0.738 0.017 319.5);
}

.element {
  color: var(--foggy-plum);
  background-color: hsl(288 6% 67%);
  border-color: oklch(0.738 0.017 319.5);
}

Tailwind CSS v4

@theme {
  --color-foggy-plum: #afa7b1;
  --color-foggy-plum-50: #f7f4f8;
  --color-foggy-plum-100: #eae6eb;
  --color-foggy-plum-200: #d8d2d9;
  --color-foggy-plum-300: #bbb5bd;
  --color-foggy-plum-400: #a39ba5;
  --color-foggy-plum-500: #8b838d;
  --color-foggy-plum-600: #766f78;
  --color-foggy-plum-700: #5e5860;
  --color-foggy-plum-800: #454146;
  --color-foggy-plum-900: #302d31;
  --color-foggy-plum-950: #1c1a1d;
}

SCSS

$foggy-plum: #afa7b1;
$foggy-plum-rgb: 175, 167, 177;
$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);
}