Peanut Butter Crust

CSS

:root {
  --peanut-butter-crust: #c8a38a;
  --peanut-butter-crust-rgb: 200 163 138;
  --peanut-butter-crust-oklch: oklch(0.742 0.056 55.7);
}

.element {
  color: var(--peanut-butter-crust);
  background-color: hsl(24 36% 66%);
  border-color: oklch(0.742 0.056 55.7);
}

Tailwind CSS v4

@theme {
  --color-peanut-butter-crust: #c8a38a;
  --color-peanut-butter-crust-50: #fff2e6;
  --color-peanut-butter-crust-100: #f7e4d6;
  --color-peanut-butter-crust-200: #e7cfbd;
  --color-peanut-butter-crust-300: #ceb19c;
  --color-peanut-butter-crust-400: #b9967f;
  --color-peanut-butter-crust-500: #a47d62;
  --color-peanut-butter-crust-600: #8a6a53;
  --color-peanut-butter-crust-700: #6f5442;
  --color-peanut-butter-crust-800: #523d30;
  --color-peanut-butter-crust-900: #392a21;
  --color-peanut-butter-crust-950: #231810;
}

SCSS

$peanut-butter-crust: #c8a38a;
$peanut-butter-crust-rgb: 200, 163, 138;
$peanut-butter-crust-light: mix(#fff, $peanut-butter-crust, 20%);
$peanut-butter-crust-dark: mix(#000, $peanut-butter-crust, 20%);

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