Crushed Out

CSS

:root {
  --crushed-out: #e0cfc8;
  --crushed-out-rgb: 224 207 200;
  --crushed-out-oklch: oklch(0.866 0.021 43.8);
}

.element {
  color: var(--crushed-out);
  background-color: hsl(18 28% 83%);
  border-color: oklch(0.866 0.021 43.8);
}

Tailwind CSS v4

@theme {
  --color-crushed-out: #e0cfc8;
  --color-crushed-out-50: #fbf3f0;
  --color-crushed-out-100: #eee6e2;
  --color-crushed-out-200: #ddd2cd;
  --color-crushed-out-300: #c1b4ae;
  --color-crushed-out-400: #aa9b94;
  --color-crushed-out-500: #93827b;
  --color-crushed-out-600: #7c6e68;
  --color-crushed-out-700: #645853;
  --color-crushed-out-800: #49403d;
  --color-crushed-out-900: #332c2a;
  --color-crushed-out-950: #1e1917;
}

SCSS

$crushed-out: #e0cfc8;
$crushed-out-rgb: 224, 207, 200;
$crushed-out-light: mix(#fff, $crushed-out, 20%);
$crushed-out-dark: mix(#000, $crushed-out, 20%);

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