Wheat Beer

CSS

:root {
  --wheat-beer: #bf923b;
  --wheat-beer-rgb: 191 146 59;
  --wheat-beer-oklch: oklch(0.687 0.116 80.9);
}

.element {
  color: var(--wheat-beer);
  background-color: hsl(40 53% 49%);
  border-color: oklch(0.687 0.116 80.9);
}

Tailwind CSS v4

@theme {
  --color-wheat-beer: #bf923b;
  --color-wheat-beer-50: #fff3d0;
  --color-wheat-beer-100: #fbe5bc;
  --color-wheat-beer-200: #edd09b;
  --color-wheat-beer-300: #d4b270;
  --color-wheat-beer-400: #c29746;
  --color-wheat-beer-500: #ad7c01;
  --color-wheat-beer-600: #92690b;
  --color-wheat-beer-700: #75540a;
  --color-wheat-beer-800: #583d05;
  --color-wheat-beer-900: #3d2a04;
  --color-wheat-beer-950: #271700;
}

SCSS

$wheat-beer: #bf923b;
$wheat-beer-rgb: 191, 146, 59;
$wheat-beer-light: mix(#fff, $wheat-beer, 20%);
$wheat-beer-dark: mix(#000, $wheat-beer, 20%);

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