Grain Mill

CSS

:root {
  --grain-mill: #d8c095;
  --grain-mill-rgb: 216 192 149;
  --grain-mill-oklch: oklch(0.818 0.063 82);
}

.element {
  color: var(--grain-mill);
  background-color: hsl(39 46% 72%);
  border-color: oklch(0.818 0.063 82);
}

Tailwind CSS v4

@theme {
  --color-grain-mill: #d8c095;
  --color-grain-mill-50: #fef4e1;
  --color-grain-mill-100: #f2e7d1;
  --color-grain-mill-200: #e1d3b6;
  --color-grain-mill-300: #c7b593;
  --color-grain-mill-400: #b19b74;
  --color-grain-mill-500: #9b8255;
  --color-grain-mill-600: #836e48;
  --color-grain-mill-700: #695839;
  --color-grain-mill-800: #4e4029;
  --color-grain-mill-900: #362c1b;
  --color-grain-mill-950: #21190c;
}

SCSS

$grain-mill: #d8c095;
$grain-mill-rgb: 216, 192, 149;
$grain-mill-light: mix(#fff, $grain-mill, 20%);
$grain-mill-dark: mix(#000, $grain-mill, 20%);

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