Dark Maroon

CSS

:root {
  --dark-maroon: #3c0008;
  --dark-maroon-rgb: 60 0 8;
  --dark-maroon-oklch: oklch(0.225 0.091 20.5);
}

.element {
  color: var(--dark-maroon);
  background-color: hsl(352 100% 12%);
  border-color: oklch(0.225 0.091 20.5);
}

Tailwind CSS v4

@theme {
  --color-dark-maroon: #3c0008;
  --color-dark-maroon-50: #ffece9;
  --color-dark-maroon-100: #ffddda;
  --color-dark-maroon-200: #f9c6c3;
  --color-dark-maroon-300: #e2a6a2;
  --color-dark-maroon-400: #cf8988;
  --color-dark-maroon-500: #bb6d6c;
  --color-dark-maroon-600: #9e5c5c;
  --color-dark-maroon-700: #7f4a49;
  --color-dark-maroon-800: #5e3536;
  --color-dark-maroon-900: #422425;
  --color-dark-maroon-950: #2a1314;
}

SCSS

$dark-maroon: #3c0008;
$dark-maroon-rgb: 60, 0, 8;
$dark-maroon-light: mix(#fff, $dark-maroon, 20%);
$dark-maroon-dark: mix(#000, $dark-maroon, 20%);

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