Sourdough

CSS

:root {
  --sourdough: #c9b59a;
  --sourdough-rgb: 201 181 154;
  --sourdough-oklch: oklch(0.783 0.043 75.3);
}

.element {
  color: var(--sourdough);
  background-color: hsl(34 30% 70%);
  border-color: oklch(0.783 0.043 75.3);
}

Tailwind CSS v4

@theme {
  --color-sourdough: #c9b59a;
  --color-sourdough-50: #fcf4e8;
  --color-sourdough-100: #f0e6d8;
  --color-sourdough-200: #dfd2c0;
  --color-sourdough-300: #c4b59f;
  --color-sourdough-400: #ae9b82;
  --color-sourdough-500: #978366;
  --color-sourdough-600: #806f57;
  --color-sourdough-700: #665845;
  --color-sourdough-800: #4c4032;
  --color-sourdough-900: #352c22;
  --color-sourdough-950: #201911;
}

SCSS

$sourdough: #c9b59a;
$sourdough-rgb: 201, 181, 154;
$sourdough-light: mix(#fff, $sourdough, 20%);
$sourdough-dark: mix(#000, $sourdough, 20%);

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