Pie Crust

CSS

:root {
  --pie-crust: #f1d99f;
  --pie-crust-rgb: 241 217 159;
  --pie-crust-oklch: oklch(0.892 0.079 88.1);
}

.element {
  color: var(--pie-crust);
  background-color: hsl(42 75% 78%);
  border-color: oklch(0.892 0.079 88.1);
}

Tailwind CSS v4

@theme {
  --color-pie-crust: #f1d99f;
  --color-pie-crust-50: #fef5dc;
  --color-pie-crust-100: #f2e7cb;
  --color-pie-crust-200: #e1d3ae;
  --color-pie-crust-300: #c7b689;
  --color-pie-crust-400: #b29c67;
  --color-pie-crust-500: #9c8345;
  --color-pie-crust-600: #846f3b;
  --color-pie-crust-700: #6a592f;
  --color-pie-crust-800: #4f4021;
  --color-pie-crust-900: #372c15;
  --color-pie-crust-950: #211907;
}

SCSS

$pie-crust: #f1d99f;
$pie-crust-rgb: 241, 217, 159;
$pie-crust-light: mix(#fff, $pie-crust, 20%);
$pie-crust-dark: mix(#000, $pie-crust, 20%);

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