Winter Wheat

CSS

:root {
  --winter-wheat: #dcbe97;
  --winter-wheat-rgb: 220 190 151;
  --winter-wheat-oklch: oklch(0.818 0.062 74);
}

.element {
  color: var(--winter-wheat);
  background-color: hsl(34 50% 73%);
  border-color: oklch(0.818 0.062 74);
}

Tailwind CSS v4

@theme {
  --color-winter-wheat: #dcbe97;
  --color-winter-wheat-50: #fff3e2;
  --color-winter-wheat-100: #f4e6d1;
  --color-winter-wheat-200: #e4d1b7;
  --color-winter-wheat-300: #cab494;
  --color-winter-wheat-400: #b59976;
  --color-winter-wheat-500: #9f8057;
  --color-winter-wheat-600: #866d4a;
  --color-winter-wheat-700: #6c573b;
  --color-winter-wheat-800: #503f2a;
  --color-winter-wheat-900: #382b1c;
  --color-winter-wheat-950: #22190c;
}

SCSS

$winter-wheat: #dcbe97;
$winter-wheat-rgb: 220, 190, 151;
$winter-wheat-light: mix(#fff, $winter-wheat, 20%);
$winter-wheat-dark: mix(#000, $winter-wheat, 20%);

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