Butter Up

CSS

:root {
  --butter-up: #f4e0bb;
  --butter-up-rgb: 244 224 187;
  --butter-up-oklch: oklch(0.914 0.053 82.9);
}

.element {
  color: var(--butter-up);
  background-color: hsl(39 72% 85%);
  border-color: oklch(0.914 0.053 82.9);
}

Tailwind CSS v4

@theme {
  --color-butter-up: #f4e0bb;
  --color-butter-up-50: #fcf4e4;
  --color-butter-up-100: #f0e7d4;
  --color-butter-up-200: #dfd3bb;
  --color-butter-up-300: #c4b699;
  --color-butter-up-400: #ae9c7b;
  --color-butter-up-500: #98835d;
  --color-butter-up-600: #806f4f;
  --color-butter-up-700: #67593f;
  --color-butter-up-800: #4c412d;
  --color-butter-up-900: #352d1e;
  --color-butter-up-950: #201a0e;
}

SCSS

$butter-up: #f4e0bb;
$butter-up-rgb: 244, 224, 187;
$butter-up-light: mix(#fff, $butter-up, 20%);
$butter-up-dark: mix(#000, $butter-up, 20%);

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