Garlic Butter

CSS

:root {
  --garlic-butter: #eddf5e;
  --garlic-butter-rgb: 237 223 94;
  --garlic-butter-oklch: oklch(0.891 0.149 103.1);
}

.element {
  color: var(--garlic-butter);
  background-color: hsl(54 80% 65%);
  border-color: oklch(0.891 0.149 103.1);
}

Tailwind CSS v4

@theme {
  --color-garlic-butter: #eddf5e;
  --color-garlic-butter-50: #fbf8c7;
  --color-garlic-butter-100: #efebb2;
  --color-garlic-butter-200: #ddd88d;
  --color-garlic-butter-300: #c3bc5b;
  --color-garlic-butter-400: #afa119;
  --color-garlic-butter-500: #998800;
  --color-garlic-butter-600: #817300;
  --color-garlic-butter-700: #685c00;
  --color-garlic-butter-800: #4e4300;
  --color-garlic-butter-900: #362e00;
  --color-garlic-butter-950: #211b00;
}

SCSS

$garlic-butter: #eddf5e;
$garlic-butter-rgb: 237, 223, 94;
$garlic-butter-light: mix(#fff, $garlic-butter, 20%);
$garlic-butter-dark: mix(#000, $garlic-butter, 20%);

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