#9E6A59

CSS

:root {
  --hot-cacao: #9e6a59;
  --hot-cacao-rgb: 158 106 89;
  --hot-cacao-oklch: oklch(0.575 0.072 38.9);
}

.element {
  color: var(--hot-cacao);
  background-color: hsl(15 28% 48%);
  border-color: oklch(0.575 0.072 38.9);
}

Tailwind CSS v4

@theme {
  --color-hot-cacao: #9e6a59;
  --color-hot-cacao-50: #ffefe6;
  --color-hot-cacao-100: #fee1d6;
  --color-hot-cacao-200: #f0cbbd;
  --color-hot-cacao-300: #d9ac9c;
  --color-hot-cacao-400: #c4907f;
  --color-hot-cacao-500: #b07662;
  --color-hot-cacao-600: #956454;
  --color-hot-cacao-700: #775043;
  --color-hot-cacao-800: #583931;
  --color-hot-cacao-900: #3e2721;
  --color-hot-cacao-950: #271510;
}

SCSS

$hot-cacao: #9e6a59;
$hot-cacao-rgb: 158, 106, 89;
$hot-cacao-light: mix(#fff, $hot-cacao, 20%);
$hot-cacao-dark: mix(#000, $hot-cacao, 20%);

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