Red Maple Leaf

CSS

:root {
  --red-maple-leaf: #834c4b;
  --red-maple-leaf-rgb: 131 76 75;
  --red-maple-leaf-oklch: oklch(0.481 0.075 21.3);
}

.element {
  color: var(--red-maple-leaf);
  background-color: hsl(1 27% 40%);
  border-color: oklch(0.481 0.075 21.3);
}

Tailwind CSS v4

@theme {
  --color-red-maple-leaf: #834c4b;
  --color-red-maple-leaf-50: #ffedeb;
  --color-red-maple-leaf-100: #ffdfdc;
  --color-red-maple-leaf-200: #f3c8c5;
  --color-red-maple-leaf-300: #dba9a5;
  --color-red-maple-leaf-400: #c78d8b;
  --color-red-maple-leaf-500: #b37270;
  --color-red-maple-leaf-600: #97615f;
  --color-red-maple-leaf-700: #794d4c;
  --color-red-maple-leaf-800: #5a3838;
  --color-red-maple-leaf-900: #3f2626;
  --color-red-maple-leaf-950: #281415;
}

SCSS

$red-maple-leaf: #834c4b;
$red-maple-leaf-rgb: 131, 76, 75;
$red-maple-leaf-light: mix(#fff, $red-maple-leaf, 20%);
$red-maple-leaf-dark: mix(#000, $red-maple-leaf, 20%);

.element {
  color: $red-maple-leaf;
  box-shadow: 0 0 0 2px rgba($red-maple-leaf, 0.35);
}