Granite Peak

CSS

:root {
  --granite-peak: #606b75;
  --granite-peak-rgb: 96 107 117;
  --granite-peak-oklch: oklch(0.522 0.021 245.6);
}

.element {
  color: var(--granite-peak);
  background-color: hsl(209 10% 42%);
  border-color: oklch(0.522 0.021 245.6);
}

Tailwind CSS v4

@theme {
  --color-granite-peak: #606b75;
  --color-granite-peak-50: #f1f6fb;
  --color-granite-peak-100: #e3e9ef;
  --color-granite-peak-200: #cdd5dd;
  --color-granite-peak-300: #afb9c2;
  --color-granite-peak-400: #95a0aa;
  --color-granite-peak-500: #7b8893;
  --color-granite-peak-600: #68737d;
  --color-granite-peak-700: #535c64;
  --color-granite-peak-800: #3c4349;
  --color-granite-peak-900: #2a2e33;
  --color-granite-peak-950: #171b1e;
}

SCSS

$granite-peak: #606b75;
$granite-peak-rgb: 96, 107, 117;
$granite-peak-light: mix(#fff, $granite-peak, 20%);
$granite-peak-dark: mix(#000, $granite-peak, 20%);

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