Flour Sack

CSS

:root {
  --flour-sack: #b9b297;
  --flour-sack-rgb: 185 178 151;
  --flour-sack-oklch: oklch(0.762 0.038 95.1);
}

.element {
  color: var(--flour-sack);
  background-color: hsl(48 20% 66%);
  border-color: oklch(0.762 0.038 95.1);
}

Tailwind CSS v4

@theme {
  --color-flour-sack: #b9b297;
  --color-flour-sack-50: #f8f5e9;
  --color-flour-sack-100: #ebe8da;
  --color-flour-sack-200: #d8d5c3;
  --color-flour-sack-300: #bdb8a2;
  --color-flour-sack-400: #a59f86;
  --color-flour-sack-500: #8e866a;
  --color-flour-sack-600: #78725a;
  --color-flour-sack-700: #605b48;
  --color-flour-sack-800: #474233;
  --color-flour-sack-900: #312e23;
  --color-flour-sack-950: #1d1b12;
}

SCSS

$flour-sack: #b9b297;
$flour-sack-rgb: 185, 178, 151;
$flour-sack-light: mix(#fff, $flour-sack, 20%);
$flour-sack-dark: mix(#000, $flour-sack, 20%);

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