Dark Truffle

CSS

:root {
  --dark-truffle: #594d46;
  --dark-truffle-rgb: 89 77 70;
  --dark-truffle-oklch: oklch(0.43 0.02 52.2);
}

.element {
  color: var(--dark-truffle);
  background-color: hsl(22 12% 31%);
  border-color: oklch(0.43 0.02 52.2);
}

Tailwind CSS v4

@theme {
  --color-dark-truffle: #594d46;
  --color-dark-truffle-50: #faf4f0;
  --color-dark-truffle-100: #ede6e2;
  --color-dark-truffle-200: #dbd2cc;
  --color-dark-truffle-300: #c0b5ae;
  --color-dark-truffle-400: #a89b94;
  --color-dark-truffle-500: #91837a;
  --color-dark-truffle-600: #7b6f68;
  --color-dark-truffle-700: #625953;
  --color-dark-truffle-800: #48413c;
  --color-dark-truffle-900: #322c29;
  --color-dark-truffle-950: #1e1a17;
}

SCSS

$dark-truffle: #594d46;
$dark-truffle-rgb: 89, 77, 70;
$dark-truffle-light: mix(#fff, $dark-truffle, 20%);
$dark-truffle-dark: mix(#000, $dark-truffle, 20%);

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