Brown Grey

CSS

:root {
  --brown-grey: #8d8468;
  --brown-grey-rgb: 141 132 104;
  --brown-grey-oklch: oklch(0.614 0.042 92.4);
}

.element {
  color: var(--brown-grey);
  background-color: hsl(45 15% 48%);
  border-color: oklch(0.614 0.042 92.4);
}

Tailwind CSS v4

@theme {
  --color-brown-grey: #8d8468;
  --color-brown-grey-50: #f9f5e8;
  --color-brown-grey-100: #ece8d9;
  --color-brown-grey-200: #dad4c1;
  --color-brown-grey-300: #beb8a0;
  --color-brown-grey-400: #a79e83;
  --color-brown-grey-500: #908667;
  --color-brown-grey-600: #7a7157;
  --color-brown-grey-700: #615b46;
  --color-brown-grey-800: #484232;
  --color-brown-grey-900: #322e22;
  --color-brown-grey-950: #1e1a11;
}

SCSS

$brown-grey: #8d8468;
$brown-grey-rgb: 141, 132, 104;
$brown-grey-light: mix(#fff, $brown-grey, 20%);
$brown-grey-dark: mix(#000, $brown-grey, 20%);

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