Butter Honey

CSS

:root {
  --butter-honey: #f5e5ab;
  --butter-honey-rgb: 245 229 171;
  --butter-honey-oklch: oklch(0.921 0.076 94.5);
}

.element {
  color: var(--butter-honey);
  background-color: hsl(47 79% 82%);
  border-color: oklch(0.921 0.076 94.5);
}

Tailwind CSS v4

@theme {
  --color-butter-honey: #f5e5ab;
  --color-butter-honey-50: #fbf6dd;
  --color-butter-honey-100: #efe8cc;
  --color-butter-honey-200: #ddd5b0;
  --color-butter-honey-300: #c2b88b;
  --color-butter-honey-400: #ad9e6a;
  --color-butter-honey-500: #968648;
  --color-butter-honey-600: #7f713e;
  --color-butter-honey-700: #665a31;
  --color-butter-honey-800: #4c4222;
  --color-butter-honey-900: #342d16;
  --color-butter-honey-950: #201a08;
}

SCSS

$butter-honey: #f5e5ab;
$butter-honey-rgb: 245, 229, 171;
$butter-honey-light: mix(#fff, $butter-honey, 20%);
$butter-honey-dark: mix(#000, $butter-honey, 20%);

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