New Wheat

CSS

:root {
  --new-wheat: #d2af6f;
  --new-wheat-rgb: 210 175 111;
  --new-wheat-oklch: oklch(0.771 0.092 81.8);
}

.element {
  color: var(--new-wheat);
  background-color: hsl(39 52% 63%);
  border-color: oklch(0.771 0.092 81.8);
}

Tailwind CSS v4

@theme {
  --color-new-wheat: #d2af6f;
  --color-new-wheat-50: #fff4d8;
  --color-new-wheat-100: #f7e6c6;
  --color-new-wheat-200: #e7d2a8;
  --color-new-wheat-300: #ceb481;
  --color-new-wheat-400: #ba995d;
  --color-new-wheat-500: #a58037;
  --color-new-wheat-600: #8b6c30;
  --color-new-wheat-700: #6f5626;
  --color-new-wheat-800: #533f1a;
  --color-new-wheat-900: #3a2b11;
  --color-new-wheat-950: #241804;
}

SCSS

$new-wheat: #d2af6f;
$new-wheat-rgb: 210, 175, 111;
$new-wheat-light: mix(#fff, $new-wheat, 20%);
$new-wheat-dark: mix(#000, $new-wheat, 20%);

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