Butter Muffin

CSS

:root {
  --butter-muffin: #f6dfb2;
  --butter-muffin-rgb: 246 223 178;
  --butter-muffin-oklch: oklch(0.911 0.064 84);
}

.element {
  color: var(--butter-muffin);
  background-color: hsl(40 79% 83%);
  border-color: oklch(0.911 0.064 84);
}

Tailwind CSS v4

@theme {
  --color-butter-muffin: #f6dfb2;
  --color-butter-muffin-50: #fdf4e1;
  --color-butter-muffin-100: #f1e7d0;
  --color-butter-muffin-200: #e0d3b6;
  --color-butter-muffin-300: #c6b693;
  --color-butter-muffin-400: #b09c73;
  --color-butter-muffin-500: #9a8354;
  --color-butter-muffin-600: #826f48;
  --color-butter-muffin-700: #685939;
  --color-butter-muffin-800: #4d4028;
  --color-butter-muffin-900: #362c1b;
  --color-butter-muffin-950: #21190b;
}

SCSS

$butter-muffin: #f6dfb2;
$butter-muffin-rgb: 246, 223, 178;
$butter-muffin-light: mix(#fff, $butter-muffin, 20%);
$butter-muffin-dark: mix(#000, $butter-muffin, 20%);

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