Overgrown Granite

CSS

:root {
  --overgrown-granite: #8b8265;
  --overgrown-granite-rgb: 139 130 101;
  --overgrown-granite-oklch: oklch(0.607 0.043 92.9);
}

.element {
  color: var(--overgrown-granite);
  background-color: hsl(46 16% 47%);
  border-color: oklch(0.607 0.043 92.9);
}

Tailwind CSS v4

@theme {
  --color-overgrown-granite: #8b8265;
  --color-overgrown-granite-50: #f9f5e8;
  --color-overgrown-granite-100: #ece8d8;
  --color-overgrown-granite-200: #dad4c0;
  --color-overgrown-granite-300: #beb89f;
  --color-overgrown-granite-400: #a79e82;
  --color-overgrown-granite-500: #908666;
  --color-overgrown-granite-600: #7a7156;
  --color-overgrown-granite-700: #615b45;
  --color-overgrown-granite-800: #484231;
  --color-overgrown-granite-900: #322e21;
  --color-overgrown-granite-950: #1e1a11;
}

SCSS

$overgrown-granite: #8b8265;
$overgrown-granite-rgb: 139, 130, 101;
$overgrown-granite-light: mix(#fff, $overgrown-granite, 20%);
$overgrown-granite-dark: mix(#000, $overgrown-granite, 20%);

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