#302226

CSS

:root {
  --smoky-charcoal: #302226;
  --smoky-charcoal-rgb: 48 34 38;
  --smoky-charcoal-oklch: oklch(0.27 0.022 359.9);
}

.element {
  color: var(--smoky-charcoal);
  background-color: hsl(343 17% 16%);
  border-color: oklch(0.27 0.022 359.9);
}

Tailwind CSS v4

@theme {
  --color-smoky-charcoal: #302226;
  --color-smoky-charcoal-50: #fbf3f4;
  --color-smoky-charcoal-100: #efe5e7;
  --color-smoky-charcoal-200: #ddd0d3;
  --color-smoky-charcoal-300: #c2b3b6;
  --color-smoky-charcoal-400: #aa999e;
  --color-smoky-charcoal-500: #948085;
  --color-smoky-charcoal-600: #7d6d71;
  --color-smoky-charcoal-700: #64575a;
  --color-smoky-charcoal-800: #493f42;
  --color-smoky-charcoal-900: #332c2e;
  --color-smoky-charcoal-950: #1e191b;
}

SCSS

$smoky-charcoal: #302226;
$smoky-charcoal-rgb: 48, 34, 38;
$smoky-charcoal-light: mix(#fff, $smoky-charcoal, 20%);
$smoky-charcoal-dark: mix(#000, $smoky-charcoal, 20%);

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