Macaroni and Cheese

CSS

:root {
  --macaroni-and-cheese: #ffb97b;
  --macaroni-and-cheese-rgb: 255 185 123;
  --macaroni-and-cheese-oklch: oklch(0.838 0.113 61.9);
}

.element {
  color: var(--macaroni-and-cheese);
  background-color: hsl(28 100% 74%);
  border-color: oklch(0.838 0.113 61.9);
}

Tailwind CSS v4

@theme {
  --color-macaroni-and-cheese: #ffb97b;
  --color-macaroni-and-cheese-50: #ffefd4;
  --color-macaroni-and-cheese-100: #ffe1c1;
  --color-macaroni-and-cheese-200: #f7cba2;
  --color-macaroni-and-cheese-300: #e0ab7a;
  --color-macaroni-and-cheese-400: #ce8f55;
  --color-macaroni-and-cheese-500: #bb7329;
  --color-macaroni-and-cheese-600: #9e6125;
  --color-macaroni-and-cheese-700: #7e4e1e;
  --color-macaroni-and-cheese-800: #5e3814;
  --color-macaroni-and-cheese-900: #42260d;
  --color-macaroni-and-cheese-950: #2a1402;
}

SCSS

$macaroni-and-cheese: #ffb97b;
$macaroni-and-cheese-rgb: 255, 185, 123;
$macaroni-and-cheese-light: mix(#fff, $macaroni-and-cheese, 20%);
$macaroni-and-cheese-dark: mix(#000, $macaroni-and-cheese, 20%);

.element {
  color: $macaroni-and-cheese;
  box-shadow: 0 0 0 2px rgba($macaroni-and-cheese, 0.35);
}