Wet Taupe

CSS

:root {
  --wet-taupe: #907e6c;
  --wet-taupe-rgb: 144 126 108;
  --wet-taupe-oklch: oklch(0.605 0.034 67.1);
}

.element {
  color: var(--wet-taupe);
  background-color: hsl(30 14% 49%);
  border-color: oklch(0.605 0.034 67.1);
}

Tailwind CSS v4

@theme {
  --color-wet-taupe: #907e6c;
  --color-wet-taupe-50: #fcf4eb;
  --color-wet-taupe-100: #f0e6dc;
  --color-wet-taupe-200: #ded2c5;
  --color-wet-taupe-300: #c3b5a5;
  --color-wet-taupe-400: #ad9b89;
  --color-wet-taupe-500: #96826e;
  --color-wet-taupe-600: #7f6e5e;
  --color-wet-taupe-700: #66584b;
  --color-wet-taupe-800: #4b4036;
  --color-wet-taupe-900: #342c25;
  --color-wet-taupe-950: #1f1914;
}

SCSS

$wet-taupe: #907e6c;
$wet-taupe-rgb: 144, 126, 108;
$wet-taupe-light: mix(#fff, $wet-taupe, 20%);
$wet-taupe-dark: mix(#000, $wet-taupe, 20%);

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