Covered Wagon

CSS

:root {
  --covered-wagon: #726449;
  --covered-wagon-rgb: 114 100 73;
  --covered-wagon-oklch: oklch(0.509 0.044 83.5);
}

.element {
  color: var(--covered-wagon);
  background-color: hsl(40 22% 37%);
  border-color: oklch(0.509 0.044 83.5);
}

Tailwind CSS v4

@theme {
  --color-covered-wagon: #726449;
  --color-covered-wagon-50: #fbf5e7;
  --color-covered-wagon-100: #eee7d8;
  --color-covered-wagon-200: #ddd3c0;
  --color-covered-wagon-300: #c2b69f;
  --color-covered-wagon-400: #ab9d81;
  --color-covered-wagon-500: #948465;
  --color-covered-wagon-600: #7d7056;
  --color-covered-wagon-700: #645944;
  --color-covered-wagon-800: #4a4131;
  --color-covered-wagon-900: #332d21;
  --color-covered-wagon-950: #1f1a11;
}

SCSS

$covered-wagon: #726449;
$covered-wagon-rgb: 114, 100, 73;
$covered-wagon-light: mix(#fff, $covered-wagon, 20%);
$covered-wagon-dark: mix(#000, $covered-wagon, 20%);

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