Barley

CSS

:root {
  --barley: #d5b37e;
  --barley-rgb: 213 179 126;
  --barley-oklch: oklch(0.784 0.08 78.3);
}

.element {
  color: var(--barley);
  background-color: hsl(37 51% 66%);
  border-color: oklch(0.784 0.08 78.3);
}

Tailwind CSS v4

@theme {
  --color-barley: #d5b37e;
  --color-barley-50: #fff3dc;
  --color-barley-100: #f6e6cb;
  --color-barley-200: #e6d1ae;
  --color-barley-300: #cdb489;
  --color-barley-400: #b89968;
  --color-barley-500: #a38045;
  --color-barley-600: #8a6c3c;
  --color-barley-700: #6e562f;
  --color-barley-800: #523f21;
  --color-barley-900: #392b16;
  --color-barley-950: #241807;
}

SCSS

$barley: #d5b37e;
$barley-rgb: 213, 179, 126;
$barley-light: mix(#fff, $barley, 20%);
$barley-dark: mix(#000, $barley, 20%);

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