Butter Ridge

CSS

:root {
  --butter-ridge: #f9e097;
  --butter-ridge-rgb: 249 224 151;
  --butter-ridge-oklch: oklch(0.911 0.096 91.3);
}

.element {
  color: var(--butter-ridge);
  background-color: hsl(45 89% 78%);
  border-color: oklch(0.911 0.096 91.3);
}

Tailwind CSS v4

@theme {
  --color-butter-ridge: #f9e097;
  --color-butter-ridge-50: #fef5d7;
  --color-butter-ridge-100: #f2e8c4;
  --color-butter-ridge-200: #e2d4a6;
  --color-butter-ridge-300: #c8b77f;
  --color-butter-ridge-400: #b39d59;
  --color-butter-ridge-500: #9e8331;
  --color-butter-ridge-600: #856f2b;
  --color-butter-ridge-700: #6b5922;
  --color-butter-ridge-800: #504117;
  --color-butter-ridge-900: #372c0e;
  --color-butter-ridge-950: #221902;
}

SCSS

$butter-ridge: #f9e097;
$butter-ridge-rgb: 249, 224, 151;
$butter-ridge-light: mix(#fff, $butter-ridge, 20%);
$butter-ridge-dark: mix(#000, $butter-ridge, 20%);

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