Baked Bread

CSS

:root {
  --baked-bread: #dacba9;
  --baked-bread-rgb: 218 203 169;
  --baked-bread-oklch: oklch(0.846 0.048 87);
}

.element {
  color: var(--baked-bread);
  background-color: hsl(42 40% 76%);
  border-color: oklch(0.846 0.048 87);
}

Tailwind CSS v4

@theme {
  --color-baked-bread: #dacba9;
  --color-baked-bread-50: #fbf5e6;
  --color-baked-bread-100: #eee7d6;
  --color-baked-bread-200: #dcd4bd;
  --color-baked-bread-300: #c1b79c;
  --color-baked-bread-400: #ab9d7e;
  --color-baked-bread-500: #948561;
  --color-baked-bread-600: #7d7053;
  --color-baked-bread-700: #645a42;
  --color-baked-bread-800: #4a412f;
  --color-baked-bread-900: #332d20;
  --color-baked-bread-950: #1f1a0f;
}

SCSS

$baked-bread: #dacba9;
$baked-bread-rgb: 218, 203, 169;
$baked-bread-light: mix(#fff, $baked-bread, 20%);
$baked-bread-dark: mix(#000, $baked-bread, 20%);

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