Wheat Bread

CSS

:root {
  --wheat-bread: #dfbb7e;
  --wheat-bread-rgb: 223 187 126;
  --wheat-bread-oklch: oklch(0.81 0.089 80.2);
}

.element {
  color: var(--wheat-bread);
  background-color: hsl(38 60% 68%);
  border-color: oklch(0.81 0.089 80.2);
}

Tailwind CSS v4

@theme {
  --color-wheat-bread: #dfbb7e;
  --color-wheat-bread-50: #fff3d9;
  --color-wheat-bread-100: #f7e6c7;
  --color-wheat-bread-200: #e7d1aa;
  --color-wheat-bread-300: #ceb483;
  --color-wheat-bread-400: #ba9960;
  --color-wheat-bread-500: #a57f3b;
  --color-wheat-bread-600: #8b6c33;
  --color-wheat-bread-700: #705629;
  --color-wheat-bread-800: #533e1c;
  --color-wheat-bread-900: #3a2b12;
  --color-wheat-bread-950: #241805;
}

SCSS

$wheat-bread: #dfbb7e;
$wheat-bread-rgb: 223, 187, 126;
$wheat-bread-light: mix(#fff, $wheat-bread, 20%);
$wheat-bread-dark: mix(#000, $wheat-bread, 20%);

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