Butter Fingers

CSS

:root {
  --butter-fingers: #fce9ad;
  --butter-fingers-rgb: 252 233 173;
  --butter-fingers-oklch: oklch(0.935 0.079 92.6);
}

.element {
  color: var(--butter-fingers);
  background-color: hsl(46 93% 83%);
  border-color: oklch(0.935 0.079 92.6);
}

Tailwind CSS v4

@theme {
  --color-butter-fingers: #fce9ad;
  --color-butter-fingers-50: #fcf5dc;
  --color-butter-fingers-100: #f0e8cb;
  --color-butter-fingers-200: #dfd4af;
  --color-butter-fingers-300: #c4b789;
  --color-butter-fingers-400: #af9e67;
  --color-butter-fingers-500: #988545;
  --color-butter-fingers-600: #81703b;
  --color-butter-fingers-700: #675a2f;
  --color-butter-fingers-800: #4d4120;
  --color-butter-fingers-900: #352d15;
  --color-butter-fingers-950: #201a07;
}

SCSS

$butter-fingers: #fce9ad;
$butter-fingers-rgb: 252, 233, 173;
$butter-fingers-light: mix(#fff, $butter-fingers, 20%);
$butter-fingers-dark: mix(#000, $butter-fingers, 20%);

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