Rye Bread

CSS

:root {
  --rye-bread: #cdbea1;
  --rye-bread-rgb: 205 190 161;
  --rye-bread-oklch: oklch(0.806 0.043 83.8);
}

.element {
  color: var(--rye-bread);
  background-color: hsl(40 31% 72%);
  border-color: oklch(0.806 0.043 83.8);
}

Tailwind CSS v4

@theme {
  --color-rye-bread: #cdbea1;
  --color-rye-bread-50: #fbf5e8;
  --color-rye-bread-100: #eee7d8;
  --color-rye-bread-200: #dcd3c0;
  --color-rye-bread-300: #c1b69f;
  --color-rye-bread-400: #ab9d82;
  --color-rye-bread-500: #948466;
  --color-rye-bread-600: #7d7057;
  --color-rye-bread-700: #645945;
  --color-rye-bread-800: #4a4132;
  --color-rye-bread-900: #332d22;
  --color-rye-bread-950: #1f1a11;
}

SCSS

$rye-bread: #cdbea1;
$rye-bread-rgb: 205, 190, 161;
$rye-bread-light: mix(#fff, $rye-bread, 20%);
$rye-bread-dark: mix(#000, $rye-bread, 20%);

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