#DDB0A5

CSS

:root {
  --borlotti-bean: #ddb0a5;
  --borlotti-bean-rgb: 221 176 165;
  --borlotti-bean-oklch: oklch(0.795 0.055 34.1);
}

.element {
  color: var(--borlotti-bean);
  background-color: hsl(12 45% 76%);
  border-color: oklch(0.795 0.055 34.1);
}

Tailwind CSS v4

@theme {
  --color-borlotti-bean: #ddb0a5;
  --color-borlotti-bean-50: #fff0ea;
  --color-borlotti-bean-100: #fae2db;
  --color-borlotti-bean-200: #ebcdc4;
  --color-borlotti-bean-300: #d2aea4;
  --color-borlotti-bean-400: #bd9389;
  --color-borlotti-bean-500: #a7796e;
  --color-borlotti-bean-600: #8d675d;
  --color-borlotti-bean-700: #71524a;
  --color-borlotti-bean-800: #543b36;
  --color-borlotti-bean-900: #3a2925;
  --color-borlotti-bean-950: #241714;
}

SCSS

$borlotti-bean: #ddb0a5;
$borlotti-bean-rgb: 221, 176, 165;
$borlotti-bean-light: mix(#fff, $borlotti-bean, 20%);
$borlotti-bean-dark: mix(#000, $borlotti-bean, 20%);

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