Sand Muffin

CSS

:root {
  --sand-muffin: #ffdfc2;
  --sand-muffin-rgb: 255 223 194;
  --sand-muffin-oklch: oklch(0.923 0.052 64.3);
}

.element {
  color: var(--sand-muffin);
  background-color: hsl(29 100% 88%);
  border-color: oklch(0.923 0.052 64.3);
}

Tailwind CSS v4

@theme {
  --color-sand-muffin: #ffdfc2;
  --color-sand-muffin-50: #fff3e6;
  --color-sand-muffin-100: #f4e5d6;
  --color-sand-muffin-200: #e4d0bd;
  --color-sand-muffin-300: #cab39c;
  --color-sand-muffin-400: #b5987f;
  --color-sand-muffin-500: #9f7f62;
  --color-sand-muffin-600: #866c53;
  --color-sand-muffin-700: #6c5642;
  --color-sand-muffin-800: #503f30;
  --color-sand-muffin-900: #372b20;
  --color-sand-muffin-950: #221810;
}

SCSS

$sand-muffin: #ffdfc2;
$sand-muffin-rgb: 255, 223, 194;
$sand-muffin-light: mix(#fff, $sand-muffin, 20%);
$sand-muffin-dark: mix(#000, $sand-muffin, 20%);

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