Green Granite

CSS

:root {
  --green-granite: #7c9793;
  --green-granite-rgb: 124 151 147;
  --green-granite-oklch: oklch(0.654 0.031 185.5);
}

.element {
  color: var(--green-granite);
  background-color: hsl(171 11% 54%);
  border-color: oklch(0.654 0.031 185.5);
}

Tailwind CSS v4

@theme {
  --color-green-granite: #7c9793;
  --color-green-granite-50: #ecf8f7;
  --color-green-granite-100: #ddebea;
  --color-green-granite-200: #c6d9d6;
  --color-green-granite-300: #a6bdba;
  --color-green-granite-400: #8ba5a1;
  --color-green-granite-500: #708d89;
  --color-green-granite-600: #5f7774;
  --color-green-granite-700: #4c605d;
  --color-green-granite-800: #374643;
  --color-green-granite-900: #25302f;
  --color-green-granite-950: #141d1b;
}

SCSS

$green-granite: #7c9793;
$green-granite-rgb: 124, 151, 147;
$green-granite-light: mix(#fff, $green-granite, 20%);
$green-granite-dark: mix(#000, $green-granite, 20%);

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