#4F3136

CSS

:root {
  --dark-roast: #4f3136;
  --dark-roast-rgb: 79 49 54;
  --dark-roast-oklch: oklch(0.351 0.044 8.7);
}

.element {
  color: var(--dark-roast);
  background-color: hsl(350 23% 25%);
  border-color: oklch(0.351 0.044 8.7);
}

Tailwind CSS v4

@theme {
  --color-dark-roast: #4f3136;
  --color-dark-roast-50: #fff0f2;
  --color-dark-roast-100: #f6e2e4;
  --color-dark-roast-200: #e6cdd0;
  --color-dark-roast-300: #cdafb2;
  --color-dark-roast-400: #b79499;
  --color-dark-roast-500: #a17a80;
  --color-dark-roast-600: #88686c;
  --color-dark-roast-700: #6d5357;
  --color-dark-roast-800: #503c40;
  --color-dark-roast-900: #38292c;
  --color-dark-roast-950: #221719;
}

SCSS

$dark-roast: #4f3136;
$dark-roast-rgb: 79, 49, 54;
$dark-roast-light: mix(#fff, $dark-roast, 20%);
$dark-roast-dark: mix(#000, $dark-roast, 20%);

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