Terrace Brown

CSS

:root {
  --terrace-brown: #73544d;
  --terrace-brown-rgb: 115 84 77;
  --terrace-brown-oklch: oklch(0.477 0.043 33.1);
}

.element {
  color: var(--terrace-brown);
  background-color: hsl(11 20% 38%);
  border-color: oklch(0.477 0.043 33.1);
}

Tailwind CSS v4

@theme {
  --color-terrace-brown: #73544d;
  --color-terrace-brown-50: #fff1ed;
  --color-terrace-brown-100: #f6e3de;
  --color-terrace-brown-200: #e6cec8;
  --color-terrace-brown-300: #ccb0a9;
  --color-terrace-brown-400: #b7968e;
  --color-terrace-brown-500: #a17c74;
  --color-terrace-brown-600: #886962;
  --color-terrace-brown-700: #6d544e;
  --color-terrace-brown-800: #503d39;
  --color-terrace-brown-900: #382a27;
  --color-terrace-brown-950: #221815;
}

SCSS

$terrace-brown: #73544d;
$terrace-brown-rgb: 115, 84, 77;
$terrace-brown-light: mix(#fff, $terrace-brown, 20%);
$terrace-brown-dark: mix(#000, $terrace-brown, 20%);

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