Wooden Wagon

CSS

:root {
  --wooden-wagon: #815a48;
  --wooden-wagon-rgb: 129 90 72;
  --wooden-wagon-oklch: oklch(0.504 0.059 45.7);
}

.element {
  color: var(--wooden-wagon);
  background-color: hsl(19 28% 39%);
  border-color: oklch(0.504 0.059 45.7);
}

Tailwind CSS v4

@theme {
  --color-wooden-wagon: #815a48;
  --color-wooden-wagon-50: #fff1e7;
  --color-wooden-wagon-100: #f9e3d7;
  --color-wooden-wagon-200: #eacdbf;
  --color-wooden-wagon-300: #d2af9e;
  --color-wooden-wagon-400: #bd9482;
  --color-wooden-wagon-500: #a77a65;
  --color-wooden-wagon-600: #8e6856;
  --color-wooden-wagon-700: #715345;
  --color-wooden-wagon-800: #543c32;
  --color-wooden-wagon-900: #3b2922;
  --color-wooden-wagon-950: #251711;
}

SCSS

$wooden-wagon: #815a48;
$wooden-wagon-rgb: 129, 90, 72;
$wooden-wagon-light: mix(#fff, $wooden-wagon, 20%);
$wooden-wagon-dark: mix(#000, $wooden-wagon, 20%);

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