Over the Taupe

CSS

:root {
  --over-the-taupe: #b09d8a;
  --over-the-taupe-rgb: 176 157 138;
  --over-the-taupe-oklch: oklch(0.707 0.035 67.2);
}

.element {
  color: var(--over-the-taupe);
  background-color: hsl(30 19% 62%);
  border-color: oklch(0.707 0.035 67.2);
}

Tailwind CSS v4

@theme {
  --color-over-the-taupe: #b09d8a;
  --color-over-the-taupe-50: #fcf4eb;
  --color-over-the-taupe-100: #f0e6dc;
  --color-over-the-taupe-200: #ded2c5;
  --color-over-the-taupe-300: #c4b5a5;
  --color-over-the-taupe-400: #ad9b89;
  --color-over-the-taupe-500: #96826e;
  --color-over-the-taupe-600: #7f6e5d;
  --color-over-the-taupe-700: #66584a;
  --color-over-the-taupe-800: #4b4036;
  --color-over-the-taupe-900: #342c25;
  --color-over-the-taupe-950: #201913;
}

SCSS

$over-the-taupe: #b09d8a;
$over-the-taupe-rgb: 176, 157, 138;
$over-the-taupe-light: mix(#fff, $over-the-taupe, 20%);
$over-the-taupe-dark: mix(#000, $over-the-taupe, 20%);

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