Shade-Grown

CSS

:root {
  --shade-grown: #4e5147;
  --shade-grown-rgb: 78 81 71;
  --shade-grown-oklch: oklch(0.429 0.017 120.7);
}

.element {
  color: var(--shade-grown);
  background-color: hsl(78 7% 30%);
  border-color: oklch(0.429 0.017 120.7);
}

Tailwind CSS v4

@theme {
  --color-shade-grown: #4e5147;
  --color-shade-grown-50: #f4f6f1;
  --color-shade-grown-100: #e7e9e3;
  --color-shade-grown-200: #d3d5ce;
  --color-shade-grown-300: #b6b9b0;
  --color-shade-grown-400: #9da095;
  --color-shade-grown-500: #84887c;
  --color-shade-grown-600: #707369;
  --color-shade-grown-700: #5a5c54;
  --color-shade-grown-800: #42433d;
  --color-shade-grown-900: #2d2e2a;
  --color-shade-grown-950: #1a1b17;
}

SCSS

$shade-grown: #4e5147;
$shade-grown-rgb: 78, 81, 71;
$shade-grown-light: mix(#fff, $shade-grown, 20%);
$shade-grown-dark: mix(#000, $shade-grown, 20%);

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