Greyish Brown

CSS

:root {
  --greyish-brown: #7a6a4f;
  --greyish-brown-rgb: 122 106 79;
  --greyish-brown-oklch: oklch(0.532 0.045 80.5);
}

.element {
  color: var(--greyish-brown);
  background-color: hsl(38 21% 39%);
  border-color: oklch(0.532 0.045 80.5);
}

Tailwind CSS v4

@theme {
  --color-greyish-brown: #7a6a4f;
  --color-greyish-brown-50: #fbf4e7;
  --color-greyish-brown-100: #efe7d8;
  --color-greyish-brown-200: #ded3bf;
  --color-greyish-brown-300: #c3b69e;
  --color-greyish-brown-400: #ac9c81;
  --color-greyish-brown-500: #968365;
  --color-greyish-brown-600: #7f6f56;
  --color-greyish-brown-700: #655944;
  --color-greyish-brown-800: #4b4131;
  --color-greyish-brown-900: #342d21;
  --color-greyish-brown-950: #1f1a11;
}

SCSS

$greyish-brown: #7a6a4f;
$greyish-brown-rgb: 122, 106, 79;
$greyish-brown-light: mix(#fff, $greyish-brown, 20%);
$greyish-brown-dark: mix(#000, $greyish-brown, 20%);

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