Pinkish Brown

CSS

:root {
  --pinkish-brown: #b17261;
  --pinkish-brown-rgb: 177 114 97;
  --pinkish-brown-oklch: oklch(0.615 0.084 35.8);
}

.element {
  color: var(--pinkish-brown);
  background-color: hsl(13 34% 54%);
  border-color: oklch(0.615 0.084 35.8);
}

Tailwind CSS v4

@theme {
  --color-pinkish-brown: #b17261;
  --color-pinkish-brown-50: #ffeee4;
  --color-pinkish-brown-100: #ffdfd4;
  --color-pinkish-brown-200: #f6c9bb;
  --color-pinkish-brown-300: #dea999;
  --color-pinkish-brown-400: #cb8d7c;
  --color-pinkish-brown-500: #b7715f;
  --color-pinkish-brown-600: #9a6051;
  --color-pinkish-brown-700: #7c4d40;
  --color-pinkish-brown-800: #5c372f;
  --color-pinkish-brown-900: #402620;
  --color-pinkish-brown-950: #29140f;
}

SCSS

$pinkish-brown: #b17261;
$pinkish-brown-rgb: 177, 114, 97;
$pinkish-brown-light: mix(#fff, $pinkish-brown, 20%);
$pinkish-brown-dark: mix(#000, $pinkish-brown, 20%);

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