Lodgepole Pines

CSS

:root {
  --lodgepole-pines: #aca690;
  --lodgepole-pines-rgb: 172 166 144;
  --lodgepole-pines-oklch: oklch(0.724 0.032 94.5);
}

.element {
  color: var(--lodgepole-pines);
  background-color: hsl(47 14% 62%);
  border-color: oklch(0.724 0.032 94.5);
}

Tailwind CSS v4

@theme {
  --color-lodgepole-pines: #aca690;
  --color-lodgepole-pines-50: #f8f5eb;
  --color-lodgepole-pines-100: #ebe8dc;
  --color-lodgepole-pines-200: #d8d4c6;
  --color-lodgepole-pines-300: #bcb8a6;
  --color-lodgepole-pines-400: #a49f8a;
  --color-lodgepole-pines-500: #8d866f;
  --color-lodgepole-pines-600: #77725e;
  --color-lodgepole-pines-700: #5f5b4b;
  --color-lodgepole-pines-800: #464236;
  --color-lodgepole-pines-900: #312e25;
  --color-lodgepole-pines-950: #1d1a14;
}

SCSS

$lodgepole-pines: #aca690;
$lodgepole-pines-rgb: 172, 166, 144;
$lodgepole-pines-light: mix(#fff, $lodgepole-pines, 20%);
$lodgepole-pines-dark: mix(#000, $lodgepole-pines, 20%);

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