Falling Leaves

CSS

:root {
  --falling-leaves: #a55a3b;
  --falling-leaves-rgb: 165 90 59;
  --falling-leaves-oklch: oklch(0.549 0.108 42.6);
}

.element {
  color: var(--falling-leaves);
  background-color: hsl(18 47% 44%);
  border-color: oklch(0.549 0.108 42.6);
}

Tailwind CSS v4

@theme {
  --color-falling-leaves: #a55a3b;
  --color-falling-leaves-50: #ffecdc;
  --color-falling-leaves-100: #ffddcb;
  --color-falling-leaves-200: #fdc6af;
  --color-falling-leaves-300: #e7a68a;
  --color-falling-leaves-400: #d4896a;
  --color-falling-leaves-500: #c16c49;
  --color-falling-leaves-600: #a35c3f;
  --color-falling-leaves-700: #834932;
  --color-falling-leaves-800: #623424;
  --color-falling-leaves-900: #442418;
  --color-falling-leaves-950: #2c1209;
}

SCSS

$falling-leaves: #a55a3b;
$falling-leaves-rgb: 165, 90, 59;
$falling-leaves-light: mix(#fff, $falling-leaves, 20%);
$falling-leaves-dark: mix(#000, $falling-leaves, 20%);

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