Catacomb Walls

CSS

:root {
  --catacomb-walls: #dbd7d0;
  --catacomb-walls-rgb: 219 215 208;
  --catacomb-walls-oklch: oklch(0.88 0.01 81.8);
}

.element {
  color: var(--catacomb-walls);
  background-color: hsl(38 13% 84%);
  border-color: oklch(0.88 0.01 81.8);
}

Tailwind CSS v4

@theme {
  --color-catacomb-walls: #dbd7d0;
  --color-catacomb-walls-50: #f6f5f2;
  --color-catacomb-walls-100: #e9e8e4;
  --color-catacomb-walls-200: #d6d4cf;
  --color-catacomb-walls-300: #bab7b1;
  --color-catacomb-walls-400: #a19e98;
  --color-catacomb-walls-500: #8a867f;
  --color-catacomb-walls-600: #74716b;
  --color-catacomb-walls-700: #5d5a56;
  --color-catacomb-walls-800: #44423e;
  --color-catacomb-walls-900: #2f2e2b;
  --color-catacomb-walls-950: #1c1a18;
}

SCSS

$catacomb-walls: #dbd7d0;
$catacomb-walls-rgb: 219, 215, 208;
$catacomb-walls-light: mix(#fff, $catacomb-walls, 20%);
$catacomb-walls-dark: mix(#000, $catacomb-walls, 20%);

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