Wild Truffle

CSS

:root {
  --wild-truffle: #463f3c;
  --wild-truffle-rgb: 70 63 60;
  --wild-truffle-oklch: oklch(0.374 0.011 44.7);
}

.element {
  color: var(--wild-truffle);
  background-color: hsl(18 8% 25%);
  border-color: oklch(0.374 0.011 44.7);
}

Tailwind CSS v4

@theme {
  --color-wild-truffle: #463f3c;
  --color-wild-truffle-50: #f8f4f2;
  --color-wild-truffle-100: #ebe7e5;
  --color-wild-truffle-200: #d8d3d0;
  --color-wild-truffle-300: #bcb6b3;
  --color-wild-truffle-400: #a49c99;
  --color-wild-truffle-500: #8d8480;
  --color-wild-truffle-600: #77706d;
  --color-wild-truffle-700: #5f5957;
  --color-wild-truffle-800: #46413f;
  --color-wild-truffle-900: #302d2c;
  --color-wild-truffle-950: #1d1a19;
}

SCSS

$wild-truffle: #463f3c;
$wild-truffle-rgb: 70, 63, 60;
$wild-truffle-light: mix(#fff, $wild-truffle, 20%);
$wild-truffle-dark: mix(#000, $wild-truffle, 20%);

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