Authentic Brown

CSS

:root {
  --authentic-brown: #6b5446;
  --authentic-brown-rgb: 107 84 70;
  --authentic-brown-oklch: oklch(0.465 0.038 52.9);
}

.element {
  color: var(--authentic-brown);
  background-color: hsl(23 21% 35%);
  border-color: oklch(0.465 0.038 52.9);
}

Tailwind CSS v4

@theme {
  --color-authentic-brown: #6b5446;
  --color-authentic-brown-50: #fef3eb;
  --color-authentic-brown-100: #f2e5dc;
  --color-authentic-brown-200: #e2d0c5;
  --color-authentic-brown-300: #c7b3a6;
  --color-authentic-brown-400: #b1998a;
  --color-authentic-brown-500: #9b806f;
  --color-authentic-brown-600: #836c5e;
  --color-authentic-brown-700: #69564b;
  --color-authentic-brown-800: #4d3f37;
  --color-authentic-brown-900: #362b25;
  --color-authentic-brown-950: #211914;
}

SCSS

$authentic-brown: #6b5446;
$authentic-brown-rgb: 107, 84, 70;
$authentic-brown-light: mix(#fff, $authentic-brown, 20%);
$authentic-brown-dark: mix(#000, $authentic-brown, 20%);

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