#B7825E

CSS

:root {
  --in-a-nutshell: #b7825e;
  --in-a-nutshell-rgb: 183 130 94;
  --in-a-nutshell-oklch: oklch(0.651 0.083 54.9);
}

.element {
  color: var(--in-a-nutshell);
  background-color: hsl(24 38% 54%);
  border-color: oklch(0.651 0.083 54.9);
}

Tailwind CSS v4

@theme {
  --color-in-a-nutshell: #b7825e;
  --color-in-a-nutshell-50: #fff0df;
  --color-in-a-nutshell-100: #fee2ce;
  --color-in-a-nutshell-200: #f1ccb3;
  --color-in-a-nutshell-300: #d9ad8e;
  --color-in-a-nutshell-400: #c5926f;
  --color-in-a-nutshell-500: #b1774f;
  --color-in-a-nutshell-600: #956544;
  --color-in-a-nutshell-700: #785136;
  --color-in-a-nutshell-800: #593a27;
  --color-in-a-nutshell-900: #3e281a;
  --color-in-a-nutshell-950: #27160a;
}

SCSS

$in-a-nutshell: #b7825e;
$in-a-nutshell-rgb: 183, 130, 94;
$in-a-nutshell-light: mix(#fff, $in-a-nutshell, 20%);
$in-a-nutshell-dark: mix(#000, $in-a-nutshell, 20%);

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