Six Feet Under

CSS

:root {
  --six-feet-under: #3d322e;
  --six-feet-under-rgb: 61 50 46;
  --six-feet-under-oklch: oklch(0.328 0.017 41);
}

.element {
  color: var(--six-feet-under);
  background-color: hsl(16 14% 21%);
  border-color: oklch(0.328 0.017 41);
}

Tailwind CSS v4

@theme {
  --color-six-feet-under: #3d322e;
  --color-six-feet-under-50: #faf4f1;
  --color-six-feet-under-100: #ede6e3;
  --color-six-feet-under-200: #dbd2ce;
  --color-six-feet-under-300: #c0b5b0;
  --color-six-feet-under-400: #a89b97;
  --color-six-feet-under-500: #91837d;
  --color-six-feet-under-600: #7b6f6a;
  --color-six-feet-under-700: #625855;
  --color-six-feet-under-800: #48403e;
  --color-six-feet-under-900: #322c2b;
  --color-six-feet-under-950: #1e1918;
}

SCSS

$six-feet-under: #3d322e;
$six-feet-under-rgb: 61, 50, 46;
$six-feet-under-light: mix(#fff, $six-feet-under, 20%);
$six-feet-under-dark: mix(#000, $six-feet-under, 20%);

.element {
  color: $six-feet-under;
  box-shadow: 0 0 0 2px rgba($six-feet-under, 0.35);
}