Mocha

CSS

:root {
  --mocha: #9d7651;
  --mocha-rgb: 157 118 81;
  --mocha-oklch: oklch(0.596 0.071 64.3);
}

.element {
  color: var(--mocha);
  background-color: hsl(29 32% 47%);
  border-color: oklch(0.596 0.071 64.3);
}

Tailwind CSS v4

@theme {
  --color-mocha: #9d7651;
  --color-mocha-50: #fff2e0;
  --color-mocha-100: #f9e4cf;
  --color-mocha-200: #eacfb5;
  --color-mocha-300: #d1b191;
  --color-mocha-400: #bd9672;
  --color-mocha-500: #a77c53;
  --color-mocha-600: #8e6947;
  --color-mocha-700: #715438;
  --color-mocha-800: #543d28;
  --color-mocha-900: #3b2a1b;
  --color-mocha-950: #25170b;
}

SCSS

$mocha: #9d7651;
$mocha-rgb: 157, 118, 81;
$mocha-light: mix(#fff, $mocha, 20%);
$mocha-dark: mix(#000, $mocha, 20%);

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