Wet Charcoal

CSS

:root {
  --wet-charcoal: #222023;
  --wet-charcoal-rgb: 34 32 35;
  --wet-charcoal-oklch: oklch(0.247 0.006 314.7);
}

.element {
  color: var(--wet-charcoal);
  background-color: hsl(280 4% 13%);
  border-color: oklch(0.247 0.006 314.7);
}

Tailwind CSS v4

@theme {
  --color-wet-charcoal: #222023;
  --color-wet-charcoal-50: #f6f4f6;
  --color-wet-charcoal-100: #e9e7e9;
  --color-wet-charcoal-200: #d5d3d6;
  --color-wet-charcoal-300: #b9b6b9;
  --color-wet-charcoal-400: #a09da1;
  --color-wet-charcoal-500: #888589;
  --color-wet-charcoal-600: #737074;
  --color-wet-charcoal-700: #5c5a5d;
  --color-wet-charcoal-800: #434244;
  --color-wet-charcoal-900: #2e2d2f;
  --color-wet-charcoal-950: #1b1a1b;
}

SCSS

$wet-charcoal: #222023;
$wet-charcoal-rgb: 34, 32, 35;
$wet-charcoal-light: mix(#fff, $wet-charcoal, 20%);
$wet-charcoal-dark: mix(#000, $wet-charcoal, 20%);

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