Descent Into the Catacombs

CSS

:root {
  --descent-into-the-catacombs: #445155;
  --descent-into-the-catacombs-rgb: 68 81 85;
  --descent-into-the-catacombs-oklch: oklch(0.425 0.018 218.3);
}

.element {
  color: var(--descent-into-the-catacombs);
  background-color: hsl(194 11% 30%);
  border-color: oklch(0.425 0.018 218.3);
}

Tailwind CSS v4

@theme {
  --color-descent-into-the-catacombs: #445155;
  --color-descent-into-the-catacombs-50: #f0f6f9;
  --color-descent-into-the-catacombs-100: #e2e9ec;
  --color-descent-into-the-catacombs-200: #ccd6d9;
  --color-descent-into-the-catacombs-300: #aebabe;
  --color-descent-into-the-catacombs-400: #93a1a5;
  --color-descent-into-the-catacombs-500: #7a898e;
  --color-descent-into-the-catacombs-600: #677478;
  --color-descent-into-the-catacombs-700: #525d60;
  --color-descent-into-the-catacombs-800: #3c4446;
  --color-descent-into-the-catacombs-900: #292f31;
  --color-descent-into-the-catacombs-950: #171c1d;
}

SCSS

$descent-into-the-catacombs: #445155;
$descent-into-the-catacombs-rgb: 68, 81, 85;
$descent-into-the-catacombs-light: mix(#fff, $descent-into-the-catacombs, 20%);
$descent-into-the-catacombs-dark: mix(#000, $descent-into-the-catacombs, 20%);

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