Dark Tavern

CSS

:root {
  --dark-tavern: #634e43;
  --dark-tavern-rgb: 99 78 67;
  --dark-tavern-oklch: oklch(0.442 0.033 49.1);
}

.element {
  color: var(--dark-tavern);
  background-color: hsl(21 19% 33%);
  border-color: oklch(0.442 0.033 49.1);
}

Tailwind CSS v4

@theme {
  --color-dark-tavern: #634e43;
  --color-dark-tavern-50: #fef3ed;
  --color-dark-tavern-100: #f2e5de;
  --color-dark-tavern-200: #e1d1c8;
  --color-dark-tavern-300: #c6b3a8;
  --color-dark-tavern-400: #b0998d;
  --color-dark-tavern-500: #998073;
  --color-dark-tavern-600: #826c61;
  --color-dark-tavern-700: #68574e;
  --color-dark-tavern-800: #4d3f39;
  --color-dark-tavern-900: #352b27;
  --color-dark-tavern-950: #201915;
}

SCSS

$dark-tavern: #634e43;
$dark-tavern-rgb: 99, 78, 67;
$dark-tavern-light: mix(#fff, $dark-tavern, 20%);
$dark-tavern-dark: mix(#000, $dark-tavern, 20%);

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