Ground Fog

CSS

:root {
  --ground-fog: #cfcbc4;
  --ground-fog-rgb: 207 203 196;
  --ground-fog-oklch: oklch(0.843 0.011 81.8);
}

.element {
  color: var(--ground-fog);
  background-color: hsl(38 10% 79%);
  border-color: oklch(0.843 0.011 81.8);
}

Tailwind CSS v4

@theme {
  --color-ground-fog: #cfcbc4;
  --color-ground-fog-50: #f6f5f2;
  --color-ground-fog-100: #e9e8e4;
  --color-ground-fog-200: #d6d4cf;
  --color-ground-fog-300: #bab7b1;
  --color-ground-fog-400: #a19e98;
  --color-ground-fog-500: #8a867e;
  --color-ground-fog-600: #74716b;
  --color-ground-fog-700: #5d5a56;
  --color-ground-fog-800: #44423e;
  --color-ground-fog-900: #2f2e2b;
  --color-ground-fog-950: #1c1a18;
}

SCSS

$ground-fog: #cfcbc4;
$ground-fog-rgb: 207, 203, 196;
$ground-fog-light: mix(#fff, $ground-fog, 20%);
$ground-fog-dark: mix(#000, $ground-fog, 20%);

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