Plum Taupe

CSS

:root {
  --plum-taupe: #b6a19b;
  --plum-taupe-rgb: 182 161 155;
  --plum-taupe-oklch: oklch(0.726 0.026 36.5);
}

.element {
  color: var(--plum-taupe);
  background-color: hsl(13 16% 66%);
  border-color: oklch(0.726 0.026 36.5);
}

Tailwind CSS v4

@theme {
  --color-plum-taupe: #b6a19b;
  --color-plum-taupe-50: #fcf3f0;
  --color-plum-taupe-100: #f0e5e2;
  --color-plum-taupe-200: #dfd1cc;
  --color-plum-taupe-300: #c4b3ae;
  --color-plum-taupe-400: #ad9994;
  --color-plum-taupe-500: #97807a;
  --color-plum-taupe-600: #7f6d67;
  --color-plum-taupe-700: #665753;
  --color-plum-taupe-800: #4b3f3c;
  --color-plum-taupe-900: #342c29;
  --color-plum-taupe-950: #1f1917;
}

SCSS

$plum-taupe: #b6a19b;
$plum-taupe-rgb: 182, 161, 155;
$plum-taupe-light: mix(#fff, $plum-taupe, 20%);
$plum-taupe-dark: mix(#000, $plum-taupe, 20%);

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