Dark Granite

CSS

:root {
  --dark-granite: #4f443f;
  --dark-granite-rgb: 79 68 63;
  --dark-granite-oklch: oklch(0.396 0.017 46);
}

.element {
  color: var(--dark-granite);
  background-color: hsl(19 11% 28%);
  border-color: oklch(0.396 0.017 46);
}

Tailwind CSS v4

@theme {
  --color-dark-granite: #4f443f;
  --color-dark-granite-50: #faf4f1;
  --color-dark-granite-100: #ede6e3;
  --color-dark-granite-200: #dbd2ce;
  --color-dark-granite-300: #bfb5b0;
  --color-dark-granite-400: #a89c96;
  --color-dark-granite-500: #91837d;
  --color-dark-granite-600: #7a6f6a;
  --color-dark-granite-700: #625954;
  --color-dark-granite-800: #48413e;
  --color-dark-granite-900: #322d2a;
  --color-dark-granite-950: #1e1a18;
}

SCSS

$dark-granite: #4f443f;
$dark-granite-rgb: 79, 68, 63;
$dark-granite-light: mix(#fff, $dark-granite, 20%);
$dark-granite-dark: mix(#000, $dark-granite, 20%);

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