Wild Mushroom

CSS

:root {
  --wild-mushroom: #84704b;
  --wild-mushroom-rgb: 132 112 75;
  --wild-mushroom-oklch: oklch(0.555 0.058 82.3);
}

.element {
  color: var(--wild-mushroom);
  background-color: hsl(39 28% 41%);
  border-color: oklch(0.555 0.058 82.3);
}

Tailwind CSS v4

@theme {
  --color-wild-mushroom: #84704b;
  --color-wild-mushroom-50: #fdf4e3;
  --color-wild-mushroom-100: #f1e7d2;
  --color-wild-mushroom-200: #e0d3b9;
  --color-wild-mushroom-300: #c5b696;
  --color-wild-mushroom-400: #b09c77;
  --color-wild-mushroom-500: #998359;
  --color-wild-mushroom-600: #826f4c;
  --color-wild-mushroom-700: #68593c;
  --color-wild-mushroom-800: #4d402b;
  --color-wild-mushroom-900: #352c1d;
  --color-wild-mushroom-950: #21190d;
}

SCSS

$wild-mushroom: #84704b;
$wild-mushroom-rgb: 132, 112, 75;
$wild-mushroom-light: mix(#fff, $wild-mushroom, 20%);
$wild-mushroom-dark: mix(#000, $wild-mushroom, 20%);

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