All the Leaves Are Brown

CSS

:root {
  --all-the-leaves-are-brown: #994411;
  --all-the-leaves-are-brown-rgb: 153 68 17;
  --all-the-leaves-are-brown-oklch: oklch(0.491 0.128 46.2);
}

.element {
  color: var(--all-the-leaves-are-brown);
  background-color: hsl(23 80% 33%);
  border-color: oklch(0.491 0.128 46.2);
}

Tailwind CSS v4

@theme {
  --color-all-the-leaves-are-brown: #994411;
  --color-all-the-leaves-are-brown-50: #ffebd6;
  --color-all-the-leaves-are-brown-100: #ffdcc3;
  --color-all-the-leaves-are-brown-200: #ffc4a5;
  --color-all-the-leaves-are-brown-300: #eda37d;
  --color-all-the-leaves-are-brown-400: #dc855a;
  --color-all-the-leaves-are-brown-500: #c96733;
  --color-all-the-leaves-are-brown-600: #aa582d;
  --color-all-the-leaves-are-brown-700: #884623;
  --color-all-the-leaves-are-brown-800: #663219;
  --color-all-the-leaves-are-brown-900: #482210;
  --color-all-the-leaves-are-brown-950: #2f1104;
}

SCSS

$all-the-leaves-are-brown: #994411;
$all-the-leaves-are-brown-rgb: 153, 68, 17;
$all-the-leaves-are-brown-light: mix(#fff, $all-the-leaves-are-brown, 20%);
$all-the-leaves-are-brown-dark: mix(#000, $all-the-leaves-are-brown, 20%);

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