Dark Catacombs

CSS

:root {
  --dark-catacombs: #513116;
  --dark-catacombs-rgb: 81 49 22;
  --dark-catacombs-oklch: oklch(0.346 0.061 58.8);
}

.element {
  color: var(--dark-catacombs);
  background-color: hsl(27 57% 20%);
  border-color: oklch(0.346 0.061 58.8);
}

Tailwind CSS v4

@theme {
  --color-dark-catacombs: #513116;
  --color-dark-catacombs-50: #fff2e4;
  --color-dark-catacombs-100: #f8e4d4;
  --color-dark-catacombs-200: #e8cfba;
  --color-dark-catacombs-300: #cfb198;
  --color-dark-catacombs-400: #ba967b;
  --color-dark-catacombs-500: #a57c5d;
  --color-dark-catacombs-600: #8c694f;
  --color-dark-catacombs-700: #70543f;
  --color-dark-catacombs-800: #533d2d;
  --color-dark-catacombs-900: #3a2a1f;
  --color-dark-catacombs-950: #24170e;
}

SCSS

$dark-catacombs: #513116;
$dark-catacombs-rgb: 81, 49, 22;
$dark-catacombs-light: mix(#fff, $dark-catacombs, 20%);
$dark-catacombs-dark: mix(#000, $dark-catacombs, 20%);

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