Hollow Brown

CSS

:root {
  --hollow-brown: #ac8e84;
  --hollow-brown-rgb: 172 142 132;
  --hollow-brown-oklch: oklch(0.671 0.039 39.3);
}

.element {
  color: var(--hollow-brown);
  background-color: hsl(15 19% 60%);
  border-color: oklch(0.671 0.039 39.3);
}

Tailwind CSS v4

@theme {
  --color-hollow-brown: #ac8e84;
  --color-hollow-brown-50: #fff2ed;
  --color-hollow-brown-100: #f4e4de;
  --color-hollow-brown-200: #e4cfc8;
  --color-hollow-brown-300: #cab1a8;
  --color-hollow-brown-400: #b4978d;
  --color-hollow-brown-500: #9e7e73;
  --color-hollow-brown-600: #866b62;
  --color-hollow-brown-700: #6b554e;
  --color-hollow-brown-800: #4f3e39;
  --color-hollow-brown-900: #372b27;
  --color-hollow-brown-950: #221815;
}

SCSS

$hollow-brown: #ac8e84;
$hollow-brown-rgb: 172, 142, 132;
$hollow-brown-light: mix(#fff, $hollow-brown, 20%);
$hollow-brown-dark: mix(#000, $hollow-brown, 20%);

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