Heavy Gluten

CSS

:root {
  --heavy-gluten: #ddccaa;
  --heavy-gluten-rgb: 221 204 170;
  --heavy-gluten-oklch: oklch(0.851 0.049 84.5);
}

.element {
  color: var(--heavy-gluten);
  background-color: hsl(40 43% 77%);
  border-color: oklch(0.851 0.049 84.5);
}

Tailwind CSS v4

@theme {
  --color-heavy-gluten: #ddccaa;
  --color-heavy-gluten-50: #fbf5e6;
  --color-heavy-gluten-100: #efe7d6;
  --color-heavy-gluten-200: #ddd3bd;
  --color-heavy-gluten-300: #c2b69b;
  --color-heavy-gluten-400: #ac9d7e;
  --color-heavy-gluten-500: #958461;
  --color-heavy-gluten-600: #7e7052;
  --color-heavy-gluten-700: #655941;
  --color-heavy-gluten-800: #4b412f;
  --color-heavy-gluten-900: #342d20;
  --color-heavy-gluten-950: #1f1a0f;
}

SCSS

$heavy-gluten: #ddccaa;
$heavy-gluten-rgb: 221, 204, 170;
$heavy-gluten-light: mix(#fff, $heavy-gluten, 20%);
$heavy-gluten-dark: mix(#000, $heavy-gluten, 20%);

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