Pavement

CSS

:root {
  --pavement: #554f53;
  --pavement-rgb: 85 79 83;
  --pavement-oklch: oklch(0.435 0.01 337.7);
}

.element {
  color: var(--pavement);
  background-color: hsl(320 4% 32%);
  border-color: oklch(0.435 0.01 337.7);
}

Tailwind CSS v4

@theme {
  --color-pavement: #554f53;
  --color-pavement-50: #f7f4f6;
  --color-pavement-100: #eae6e9;
  --color-pavement-200: #d7d3d5;
  --color-pavement-300: #bbb5b9;
  --color-pavement-400: #a39ca0;
  --color-pavement-500: #8b8488;
  --color-pavement-600: #756f73;
  --color-pavement-700: #5e595c;
  --color-pavement-800: #454144;
  --color-pavement-900: #2f2d2f;
  --color-pavement-950: #1c1a1b;
}

SCSS

$pavement: #554f53;
$pavement-rgb: 85, 79, 83;
$pavement-light: mix(#fff, $pavement, 20%);
$pavement-dark: mix(#000, $pavement, 20%);

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