Granite Fog

CSS

:root {
  --granite-fog: #b1bac2;
  --granite-fog-rgb: 177 186 194;
  --granite-fog-oklch: oklch(0.784 0.015 244.8);
}

.element {
  color: var(--granite-fog);
  background-color: hsl(208 12% 73%);
  border-color: oklch(0.784 0.015 244.8);
}

Tailwind CSS v4

@theme {
  --color-granite-fog: #b1bac2;
  --color-granite-fog-50: #f2f6f9;
  --color-granite-fog-100: #e4e8ed;
  --color-granite-fog-200: #cfd5da;
  --color-granite-fog-300: #b1b8bf;
  --color-granite-fog-400: #97a0a7;
  --color-granite-fog-500: #7e8790;
  --color-granite-fog-600: #6b737a;
  --color-granite-fog-700: #555c61;
  --color-granite-fog-800: #3e4347;
  --color-granite-fog-900: #2b2e31;
  --color-granite-fog-950: #181b1d;
}

SCSS

$granite-fog: #b1bac2;
$granite-fog-rgb: 177, 186, 194;
$granite-fog-light: mix(#fff, $granite-fog, 20%);
$granite-fog-dark: mix(#000, $granite-fog, 20%);

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