Bundle of Wheat

CSS

:root {
  --bundle-of-wheat: #e5b584;
  --bundle-of-wheat-rgb: 229 181 132;
  --bundle-of-wheat-oklch: oklch(0.805 0.085 66.7);
}

.element {
  color: var(--bundle-of-wheat);
  background-color: hsl(30 65% 71%);
  border-color: oklch(0.805 0.085 66.7);
}

Tailwind CSS v4

@theme {
  --color-bundle-of-wheat: #e5b584;
  --color-bundle-of-wheat-50: #fff1dc;
  --color-bundle-of-wheat-100: #fbe3ca;
  --color-bundle-of-wheat-200: #edceae;
  --color-bundle-of-wheat-300: #d5b088;
  --color-bundle-of-wheat-400: #c19567;
  --color-bundle-of-wheat-500: #ac7b45;
  --color-bundle-of-wheat-600: #91683b;
  --color-bundle-of-wheat-700: #75532f;
  --color-bundle-of-wheat-800: #573c21;
  --color-bundle-of-wheat-900: #3d2916;
  --color-bundle-of-wheat-950: #261707;
}

SCSS

$bundle-of-wheat: #e5b584;
$bundle-of-wheat-rgb: 229, 181, 132;
$bundle-of-wheat-light: mix(#fff, $bundle-of-wheat, 20%);
$bundle-of-wheat-dark: mix(#000, $bundle-of-wheat, 20%);

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