Brown Bread

CSS

:root {
  --brown-bread: #d4c5a9;
  --brown-bread-rgb: 212 197 169;
  --brown-bread-oklch: oklch(0.828 0.041 83.1);
}

.element {
  color: var(--brown-bread);
  background-color: hsl(39 33% 75%);
  border-color: oklch(0.828 0.041 83.1);
}

Tailwind CSS v4

@theme {
  --color-brown-bread: #d4c5a9;
  --color-brown-bread-50: #fbf5e8;
  --color-brown-bread-100: #eee7d9;
  --color-brown-bread-200: #dcd3c1;
  --color-brown-bread-300: #c1b6a0;
  --color-brown-bread-400: #aa9d83;
  --color-brown-bread-500: #948467;
  --color-brown-bread-600: #7d7058;
  --color-brown-bread-700: #645946;
  --color-brown-bread-800: #4a4132;
  --color-brown-bread-900: #332d22;
  --color-brown-bread-950: #1f1a11;
}

SCSS

$brown-bread: #d4c5a9;
$brown-bread-rgb: 212, 197, 169;
$brown-bread-light: mix(#fff, $brown-bread, 20%);
$brown-bread-dark: mix(#000, $brown-bread, 20%);

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