Cool Charcoal

CSS

:root {
  --cool-charcoal: #807b76;
  --cool-charcoal-rgb: 128 123 118;
  --cool-charcoal-oklch: oklch(0.586 0.01 67.6);
}

.element {
  color: var(--cool-charcoal);
  background-color: hsl(30 4% 48%);
  border-color: oklch(0.586 0.01 67.6);
}

Tailwind CSS v4

@theme {
  --color-cool-charcoal: #807b76;
  --color-cool-charcoal-50: #f7f5f2;
  --color-cool-charcoal-100: #eae7e4;
  --color-cool-charcoal-200: #d7d3d0;
  --color-cool-charcoal-300: #bbb7b2;
  --color-cool-charcoal-400: #a29d98;
  --color-cool-charcoal-500: #8b857f;
  --color-cool-charcoal-600: #75716c;
  --color-cool-charcoal-700: #5e5a56;
  --color-cool-charcoal-800: #45423f;
  --color-cool-charcoal-900: #302d2b;
  --color-cool-charcoal-950: #1c1a19;
}

SCSS

$cool-charcoal: #807b76;
$cool-charcoal-rgb: 128, 123, 118;
$cool-charcoal-light: mix(#fff, $cool-charcoal, 20%);
$cool-charcoal-dark: mix(#000, $cool-charcoal, 20%);

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