Rustic Brown

CSS

:root {
  --rustic-brown: #935848;
  --rustic-brown-rgb: 147 88 72;
  --rustic-brown-oklch: oklch(0.523 0.083 36);
}

.element {
  color: var(--rustic-brown);
  background-color: hsl(13 34% 43%);
  border-color: oklch(0.523 0.083 36);
}

Tailwind CSS v4

@theme {
  --color-rustic-brown: #935848;
  --color-rustic-brown-50: #ffeee4;
  --color-rustic-brown-100: #ffdfd4;
  --color-rustic-brown-200: #f5c9bb;
  --color-rustic-brown-300: #dea999;
  --color-rustic-brown-400: #ca8d7d;
  --color-rustic-brown-500: #b67260;
  --color-rustic-brown-600: #9a6151;
  --color-rustic-brown-700: #7b4d41;
  --color-rustic-brown-800: #5b382f;
  --color-rustic-brown-900: #402620;
  --color-rustic-brown-950: #291410;
}

SCSS

$rustic-brown: #935848;
$rustic-brown-rgb: 147, 88, 72;
$rustic-brown-light: mix(#fff, $rustic-brown, 20%);
$rustic-brown-dark: mix(#000, $rustic-brown, 20%);

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