Artist’s Charcoal

CSS

:root {
  --artist-s-charcoal: #37393e;
  --artist-s-charcoal-rgb: 55 57 62;
  --artist-s-charcoal-oklch: oklch(0.345 0.009 268.4);
}

.element {
  color: var(--artist-s-charcoal);
  background-color: hsl(223 6% 23%);
  border-color: oklch(0.345 0.009 268.4);
}

Tailwind CSS v4

@theme {
  --color-artist-s-charcoal: #37393e;
  --color-artist-s-charcoal-50: #f4f5f8;
  --color-artist-s-charcoal-100: #e6e8eb;
  --color-artist-s-charcoal-200: #d3d4d8;
  --color-artist-s-charcoal-300: #b5b7bc;
  --color-artist-s-charcoal-400: #9c9ea4;
  --color-artist-s-charcoal-500: #83868c;
  --color-artist-s-charcoal-600: #6f7177;
  --color-artist-s-charcoal-700: #595b5f;
  --color-artist-s-charcoal-800: #414246;
  --color-artist-s-charcoal-900: #2d2e30;
  --color-artist-s-charcoal-950: #1a1b1c;
}

SCSS

$artist-s-charcoal: #37393e;
$artist-s-charcoal-rgb: 55, 57, 62;
$artist-s-charcoal-light: mix(#fff, $artist-s-charcoal, 20%);
$artist-s-charcoal-dark: mix(#000, $artist-s-charcoal, 20%);

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