Wiped Out

CSS

:root {
  --wiped-out: #8b7180;
  --wiped-out-rgb: 139 113 128;
  --wiped-out-oklch: oklch(0.578 0.039 342.8);
}

.element {
  color: var(--wiped-out);
  background-color: hsl(325 10% 49%);
  border-color: oklch(0.578 0.039 342.8);
}

Tailwind CSS v4

@theme {
  --color-wiped-out: #8b7180;
  --color-wiped-out-50: #fef1f8;
  --color-wiped-out-100: #f2e3eb;
  --color-wiped-out-200: #e1ced8;
  --color-wiped-out-300: #c7b0bc;
  --color-wiped-out-400: #b096a5;
  --color-wiped-out-500: #997c8d;
  --color-wiped-out-600: #826977;
  --color-wiped-out-700: #68545f;
  --color-wiped-out-800: #4c3d46;
  --color-wiped-out-900: #352a31;
  --color-wiped-out-950: #20181d;
}

SCSS

$wiped-out: #8b7180;
$wiped-out-rgb: 139, 113, 128;
$wiped-out-light: mix(#fff, $wiped-out, 20%);
$wiped-out-dark: mix(#000, $wiped-out, 20%);

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