#C29159

CSS

:root {
  --caramel-crumb: #c29159;
  --caramel-crumb-rgb: 194 145 89;
  --caramel-crumb-oklch: oklch(0.692 0.094 68.9);
}

.element {
  color: var(--caramel-crumb);
  background-color: hsl(32 46% 55%);
  border-color: oklch(0.692 0.094 68.9);
}

Tailwind CSS v4

@theme {
  --color-caramel-crumb: #c29159;
  --color-caramel-crumb-50: #fff1d9;
  --color-caramel-crumb-100: #fde3c7;
  --color-caramel-crumb-200: #eecea9;
  --color-caramel-crumb-300: #d6b082;
  --color-caramel-crumb-400: #c39460;
  --color-caramel-crumb-500: #ae7a3a;
  --color-caramel-crumb-600: #936733;
  --color-caramel-crumb-700: #765328;
  --color-caramel-crumb-800: #583c1c;
  --color-caramel-crumb-900: #3e2912;
  --color-caramel-crumb-950: #271705;
}

SCSS

$caramel-crumb: #c29159;
$caramel-crumb-rgb: 194, 145, 89;
$caramel-crumb-light: mix(#fff, $caramel-crumb, 20%);
$caramel-crumb-dark: mix(#000, $caramel-crumb, 20%);

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