Mojo

CSS

:root {
  --mojo: #97463c;
  --mojo-rgb: 151 70 60;
  --mojo-oklch: oklch(0.496 0.111 28.8);
}

.element {
  color: var(--mojo);
  background-color: hsl(7 43% 41%);
  border-color: oklch(0.496 0.111 28.8);
}

Tailwind CSS v4

@theme {
  --color-mojo: #97463c;
  --color-mojo-50: #ffeae2;
  --color-mojo-100: #ffdbd2;
  --color-mojo-200: #ffc3b8;
  --color-mojo-300: #eba295;
  --color-mojo-400: #d88478;
  --color-mojo-500: #c5675b;
  --color-mojo-600: #a6584d;
  --color-mojo-700: #86463d;
  --color-mojo-800: #63322d;
  --color-mojo-900: #46221e;
  --color-mojo-950: #2d110e;
}

SCSS

$mojo: #97463c;
$mojo-rgb: 151, 70, 60;
$mojo-light: mix(#fff, $mojo, 20%);
$mojo-dark: mix(#000, $mojo, 20%);

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