Barely Butter

CSS

:root {
  --barely-butter: #f8e9c2;
  --barely-butter-rgb: 248 233 194;
  --barely-butter-oklch: oklch(0.936 0.053 89.5);
}

.element {
  color: var(--barely-butter);
  background-color: hsl(43 79% 87%);
  border-color: oklch(0.936 0.053 89.5);
}

Tailwind CSS v4

@theme {
  --color-barely-butter: #f8e9c2;
  --color-barely-butter-50: #fbf5e4;
  --color-barely-butter-100: #eee8d4;
  --color-barely-butter-200: #dcd4bb;
  --color-barely-butter-300: #c1b799;
  --color-barely-butter-400: #ab9d7b;
  --color-barely-butter-500: #94855d;
  --color-barely-butter-600: #7d704f;
  --color-barely-butter-700: #645a3f;
  --color-barely-butter-800: #4a412d;
  --color-barely-butter-900: #332d1e;
  --color-barely-butter-950: #1f1a0e;
}

SCSS

$barely-butter: #f8e9c2;
$barely-butter-rgb: 248, 233, 194;
$barely-butter-light: mix(#fff, $barely-butter, 20%);
$barely-butter-dark: mix(#000, $barely-butter, 20%);

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