Elusive

CSS

:root {
  --elusive: #fed7cf;
  --elusive-rgb: 254 215 207;
  --elusive-oklch: oklch(0.91 0.045 31.5);
}

.element {
  color: var(--elusive);
  background-color: hsl(10 96% 90%);
  border-color: oklch(0.91 0.045 31.5);
}

Tailwind CSS v4

@theme {
  --color-elusive: #fed7cf;
  --color-elusive-50: #fff1ed;
  --color-elusive-100: #f7e3de;
  --color-elusive-200: #e7cec8;
  --color-elusive-300: #cdb0a9;
  --color-elusive-400: #b8958e;
  --color-elusive-500: #a27c74;
  --color-elusive-600: #896962;
  --color-elusive-700: #6e544e;
  --color-elusive-800: #513d39;
  --color-elusive-900: #382a27;
  --color-elusive-950: #231715;
}

SCSS

$elusive: #fed7cf;
$elusive-rgb: 254, 215, 207;
$elusive-light: mix(#fff, $elusive, 20%);
$elusive-dark: mix(#000, $elusive, 20%);

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