Mahogany Brown

CSS

:root {
  --mahogany-brown: #812308;
  --mahogany-brown-rgb: 129 35 8;
  --mahogany-brown-oklch: oklch(0.404 0.133 35.3);
}

.element {
  color: var(--mahogany-brown);
  background-color: hsl(13 88% 27%);
  border-color: oklch(0.404 0.133 35.3);
}

Tailwind CSS v4

@theme {
  --color-mahogany-brown: #812308;
  --color-mahogany-brown-50: #ffe9da;
  --color-mahogany-brown-100: #ffd9c9;
  --color-mahogany-brown-200: #ffc1ac;
  --color-mahogany-brown-300: #f39f86;
  --color-mahogany-brown-400: #e18067;
  --color-mahogany-brown-500: #cf6045;
  --color-mahogany-brown-600: #ae523b;
  --color-mahogany-brown-700: #8c422f;
  --color-mahogany-brown-800: #692e22;
  --color-mahogany-brown-900: #4a2017;
  --color-mahogany-brown-950: #300f08;
}

SCSS

$mahogany-brown: #812308;
$mahogany-brown-rgb: 129, 35, 8;
$mahogany-brown-light: mix(#fff, $mahogany-brown, 20%);
$mahogany-brown-dark: mix(#000, $mahogany-brown, 20%);

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