Down-to-Earth

CSS

:root {
  --down-to-earth: #5c6242;
  --down-to-earth-rgb: 92 98 66;
  --down-to-earth-oklch: oklch(0.482 0.049 116.9);
}

.element {
  color: var(--down-to-earth);
  background-color: hsl(71 20% 32%);
  border-color: oklch(0.482 0.049 116.9);
}

Tailwind CSS v4

@theme {
  --color-down-to-earth: #5c6242;
  --color-down-to-earth-50: #f3f7e8;
  --color-down-to-earth-100: #e6ead8;
  --color-down-to-earth-200: #d2d8c0;
  --color-down-to-earth-300: #b4bba0;
  --color-down-to-earth-400: #9ca382;
  --color-down-to-earth-500: #848b66;
  --color-down-to-earth-600: #6f7556;
  --color-down-to-earth-700: #595e45;
  --color-down-to-earth-800: #424531;
  --color-down-to-earth-900: #2d2f21;
  --color-down-to-earth-950: #1a1c11;
}

SCSS

$down-to-earth: #5c6242;
$down-to-earth-rgb: 92, 98, 66;
$down-to-earth-light: mix(#fff, $down-to-earth, 20%);
$down-to-earth-dark: mix(#000, $down-to-earth, 20%);

.element {
  color: $down-to-earth;
  box-shadow: 0 0 0 2px rgba($down-to-earth, 0.35);
}