Pale Taupe

CSS

:root {
  --pale-taupe: #bc987e;
  --pale-taupe-rgb: 188 152 126;
  --pale-taupe-oklch: oklch(0.706 0.057 57.5);
}

.element {
  color: var(--pale-taupe);
  background-color: hsl(25 32% 62%);
  border-color: oklch(0.706 0.057 57.5);
}

Tailwind CSS v4

@theme {
  --color-pale-taupe: #bc987e;
  --color-pale-taupe-50: #fff2e5;
  --color-pale-taupe-100: #f7e4d6;
  --color-pale-taupe-200: #e7cfbd;
  --color-pale-taupe-300: #ceb19b;
  --color-pale-taupe-400: #b9977e;
  --color-pale-taupe-500: #a37d61;
  --color-pale-taupe-600: #8a6a53;
  --color-pale-taupe-700: #6f5542;
  --color-pale-taupe-800: #523d2f;
  --color-pale-taupe-900: #392a20;
  --color-pale-taupe-950: #231810;
}

SCSS

$pale-taupe: #bc987e;
$pale-taupe-rgb: 188, 152, 126;
$pale-taupe-light: mix(#fff, $pale-taupe, 20%);
$pale-taupe-dark: mix(#000, $pale-taupe, 20%);

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