In a Nutshell

CSS

:root {
  --in-a-nutshell: #b98052;
  --in-a-nutshell-rgb: 185 128 82;
  --in-a-nutshell-oklch: oklch(0.648 0.094 59);
}

.element {
  color: var(--in-a-nutshell);
  background-color: hsl(27 42% 52%);
  border-color: oklch(0.648 0.094 59);
}

Tailwind CSS v4

@theme {
  --color-in-a-nutshell: #b98052;
  --color-in-a-nutshell-50: #fff0db;
  --color-in-a-nutshell-100: #ffe1c9;
  --color-in-a-nutshell-200: #f3ccac;
  --color-in-a-nutshell-300: #dbad86;
  --color-in-a-nutshell-400: #c89165;
  --color-in-a-nutshell-500: #b47642;
  --color-in-a-nutshell-600: #986439;
  --color-in-a-nutshell-700: #7a502d;
  --color-in-a-nutshell-800: #5b3a20;
  --color-in-a-nutshell-900: #402715;
  --color-in-a-nutshell-950: #281507;
}

SCSS

$in-a-nutshell: #b98052;
$in-a-nutshell-rgb: 185, 128, 82;
$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);
}