American Mahogany

CSS

:root {
  --american-mahogany: #52352f;
  --american-mahogany-rgb: 82 53 47;
  --american-mahogany-oklch: oklch(0.361 0.043 32.2);
}

.element {
  color: var(--american-mahogany);
  background-color: hsl(10 27% 25%);
  border-color: oklch(0.361 0.043 32.2);
}

Tailwind CSS v4

@theme {
  --color-american-mahogany: #52352f;
  --color-american-mahogany-50: #fff1ed;
  --color-american-mahogany-100: #f6e3de;
  --color-american-mahogany-200: #e6cec8;
  --color-american-mahogany-300: #cdb0a9;
  --color-american-mahogany-400: #b7968e;
  --color-american-mahogany-500: #a17c74;
  --color-american-mahogany-600: #886962;
  --color-american-mahogany-700: #6d544f;
  --color-american-mahogany-800: #503d39;
  --color-american-mahogany-900: #382a27;
  --color-american-mahogany-950: #231715;
}

SCSS

$american-mahogany: #52352f;
$american-mahogany-rgb: 82, 53, 47;
$american-mahogany-light: mix(#fff, $american-mahogany, 20%);
$american-mahogany-dark: mix(#000, $american-mahogany, 20%);

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