Less Traveled

CSS

:root {
  --less-traveled: #5d6957;
  --less-traveled-rgb: 93 105 87;
  --less-traveled-oklch: oklch(0.505 0.031 135.1);
}

.element {
  color: var(--less-traveled);
  background-color: hsl(100 9% 38%);
  border-color: oklch(0.505 0.031 135.1);
}

Tailwind CSS v4

@theme {
  --color-less-traveled: #5d6957;
  --color-less-traveled-50: #f1f7ef;
  --color-less-traveled-100: #e3eae0;
  --color-less-traveled-200: #ced8cb;
  --color-less-traveled-300: #b0bbac;
  --color-less-traveled-400: #97a390;
  --color-less-traveled-500: #7d8b76;
  --color-less-traveled-600: #6a7664;
  --color-less-traveled-700: #555e50;
  --color-less-traveled-800: #3e453a;
  --color-less-traveled-900: #2b3028;
  --color-less-traveled-950: #181c16;
}

SCSS

$less-traveled: #5d6957;
$less-traveled-rgb: 93, 105, 87;
$less-traveled-light: mix(#fff, $less-traveled, 20%);
$less-traveled-dark: mix(#000, $less-traveled, 20%);

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