Shiny Rubber

CSS

:root {
  --shiny-rubber: #3a363b;
  --shiny-rubber-rgb: 58 54 59;
  --shiny-rubber-oklch: oklch(0.339 0.01 319.5);
}

.element {
  color: var(--shiny-rubber);
  background-color: hsl(288 4% 22%);
  border-color: oklch(0.339 0.01 319.5);
}

Tailwind CSS v4

@theme {
  --color-shiny-rubber: #3a363b;
  --color-shiny-rubber-50: #f6f4f7;
  --color-shiny-rubber-100: #e9e7ea;
  --color-shiny-rubber-200: #d6d3d7;
  --color-shiny-rubber-300: #bab6ba;
  --color-shiny-rubber-400: #a19da2;
  --color-shiny-rubber-500: #89848a;
  --color-shiny-rubber-600: #747075;
  --color-shiny-rubber-700: #5d595e;
  --color-shiny-rubber-800: #444145;
  --color-shiny-rubber-900: #2f2d2f;
  --color-shiny-rubber-950: #1b1a1c;
}

SCSS

$shiny-rubber: #3a363b;
$shiny-rubber-rgb: 58, 54, 59;
$shiny-rubber-light: mix(#fff, $shiny-rubber, 20%);
$shiny-rubber-dark: mix(#000, $shiny-rubber, 20%);

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