Wagon Train

CSS

:root {
  --wagon-train: #6d4d27;
  --wagon-train-rgb: 109 77 39;
  --wagon-train-oklch: oklch(0.447 0.069 69.2);
}

.element {
  color: var(--wagon-train);
  background-color: hsl(33 47% 29%);
  border-color: oklch(0.447 0.069 69.2);
}

Tailwind CSS v4

@theme {
  --color-wagon-train: #6d4d27;
  --color-wagon-train-50: #fff2e0;
  --color-wagon-train-100: #f7e5d0;
  --color-wagon-train-200: #e7d0b5;
  --color-wagon-train-300: #ceb291;
  --color-wagon-train-400: #b99872;
  --color-wagon-train-500: #a47e53;
  --color-wagon-train-600: #8b6b47;
  --color-wagon-train-700: #6f5538;
  --color-wagon-train-800: #533e28;
  --color-wagon-train-900: #3a2a1b;
  --color-wagon-train-950: #24180b;
}

SCSS

$wagon-train: #6d4d27;
$wagon-train-rgb: 109, 77, 39;
$wagon-train-light: mix(#fff, $wagon-train, 20%);
$wagon-train-dark: mix(#000, $wagon-train, 20%);

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