Polished Concrete

CSS

:root {
  --polished-concrete: #9e9793;
  --polished-concrete-rgb: 158 151 147;
  --polished-concrete-oklch: oklch(0.681 0.01 52);
}

.element {
  color: var(--polished-concrete);
  background-color: hsl(22 5% 60%);
  border-color: oklch(0.681 0.01 52);
}

Tailwind CSS v4

@theme {
  --color-polished-concrete: #9e9793;
  --color-polished-concrete-50: #f7f4f2;
  --color-polished-concrete-100: #ebe7e5;
  --color-polished-concrete-200: #d8d3d0;
  --color-polished-concrete-300: #bcb6b3;
  --color-polished-concrete-400: #a49d99;
  --color-polished-concrete-500: #8c8480;
  --color-polished-concrete-600: #76706c;
  --color-polished-concrete-700: #5f5a57;
  --color-polished-concrete-800: #45413f;
  --color-polished-concrete-900: #302d2c;
  --color-polished-concrete-950: #1c1a19;
}

SCSS

$polished-concrete: #9e9793;
$polished-concrete-rgb: 158, 151, 147;
$polished-concrete-light: mix(#fff, $polished-concrete, 20%);
$polished-concrete-dark: mix(#000, $polished-concrete, 20%);

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