Dark Cavern

CSS

:root {
  --dark-cavern: #55504d;
  --dark-cavern-rgb: 85 80 77;
  --dark-cavern-oklch: oklch(0.435 0.008 53.3);
}

.element {
  color: var(--dark-cavern);
  background-color: hsl(23 5% 32%);
  border-color: oklch(0.435 0.008 53.3);
}

Tailwind CSS v4

@theme {
  --color-dark-cavern: #55504d;
  --color-dark-cavern-50: #f7f4f3;
  --color-dark-cavern-100: #eae7e5;
  --color-dark-cavern-200: #d7d3d1;
  --color-dark-cavern-300: #bbb6b3;
  --color-dark-cavern-400: #a39d9a;
  --color-dark-cavern-500: #8b8581;
  --color-dark-cavern-600: #75706d;
  --color-dark-cavern-700: #5e5a57;
  --color-dark-cavern-800: #454240;
  --color-dark-cavern-900: #302d2c;
  --color-dark-cavern-950: #1c1a19;
}

SCSS

$dark-cavern: #55504d;
$dark-cavern-rgb: 85, 80, 77;
$dark-cavern-light: mix(#fff, $dark-cavern, 20%);
$dark-cavern-dark: mix(#000, $dark-cavern, 20%);

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