Blue Granite

CSS

:root {
  --blue-granite: #76798d;
  --blue-granite-rgb: 118 121 141;
  --blue-granite-oklch: oklch(0.581 0.031 278.7);
}

.element {
  color: var(--blue-granite);
  background-color: hsl(232 9% 51%);
  border-color: oklch(0.581 0.031 278.7);
}

Tailwind CSS v4

@theme {
  --color-blue-granite: #76798d;
  --color-blue-granite-50: #f3f4fe;
  --color-blue-granite-100: #e6e7f2;
  --color-blue-granite-200: #d1d3e2;
  --color-blue-granite-300: #b4b6c7;
  --color-blue-granite-400: #9a9db1;
  --color-blue-granite-500: #81859b;
  --color-blue-granite-600: #6d7083;
  --color-blue-granite-700: #575a69;
  --color-blue-granite-800: #3f424d;
  --color-blue-granite-900: #2c2d36;
  --color-blue-granite-950: #191a21;
}

SCSS

$blue-granite: #76798d;
$blue-granite-rgb: 118, 121, 141;
$blue-granite-light: mix(#fff, $blue-granite, 20%);
$blue-granite-dark: mix(#000, $blue-granite, 20%);

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