Gravel Dust

CSS

:root {
  --gravel-dust: #bab9a9;
  --gravel-dust-rgb: 186 185 169;
  --gravel-dust-oklch: oklch(0.782 0.022 104);
}

.element {
  color: var(--gravel-dust);
  background-color: hsl(56 11% 70%);
  border-color: oklch(0.782 0.022 104);
}

Tailwind CSS v4

@theme {
  --color-gravel-dust: #bab9a9;
  --color-gravel-dust-50: #f6f6ee;
  --color-gravel-dust-100: #e9e8e0;
  --color-gravel-dust-200: #d5d5ca;
  --color-gravel-dust-300: #b8b8ab;
  --color-gravel-dust-400: #a09f90;
  --color-gravel-dust-500: #888776;
  --color-gravel-dust-600: #737264;
  --color-gravel-dust-700: #5c5b50;
  --color-gravel-dust-800: #44433a;
  --color-gravel-dust-900: #2f2e28;
  --color-gravel-dust-950: #1b1b16;
}

SCSS

$gravel-dust: #bab9a9;
$gravel-dust-rgb: 186, 185, 169;
$gravel-dust-light: mix(#fff, $gravel-dust, 20%);
$gravel-dust-dark: mix(#000, $gravel-dust, 20%);

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