#C09259

CSS

:root {
  --caramel-crumb: #c09259;
  --caramel-crumb-rgb: 192 146 89;
  --caramel-crumb-oklch: oklch(0.691 0.093 71.2);
}

.element {
  color: var(--caramel-crumb);
  background-color: hsl(33 45% 55%);
  border-color: oklch(0.691 0.093 71.2);
}

Tailwind CSS v4

@theme {
  --color-caramel-crumb: #c09259;
  --color-caramel-crumb-50: #fff2d9;
  --color-caramel-crumb-100: #fbe4c7;
  --color-caramel-crumb-200: #edcfa9;
  --color-caramel-crumb-300: #d5b182;
  --color-caramel-crumb-400: #c19560;
  --color-caramel-crumb-500: #ac7b3a;
  --color-caramel-crumb-600: #926833;
  --color-caramel-crumb-700: #755328;
  --color-caramel-crumb-800: #573c1c;
  --color-caramel-crumb-900: #3d2912;
  --color-caramel-crumb-950: #261705;
}

SCSS

$caramel-crumb: #c09259;
$caramel-crumb-rgb: 192, 146, 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);
}