Honey

CSS

:root {
  --honey: #ae8934;
  --honey-rgb: 174 137 52;
  --honey-oklch: oklch(0.649 0.111 84.8);
}

.element {
  color: var(--honey);
  background-color: hsl(42 54% 44%);
  border-color: oklch(0.649 0.111 84.8);
}

Tailwind CSS v4

@theme {
  --color-honey: #ae8934;
  --color-honey-50: #fff4d2;
  --color-honey-100: #f8e6be;
  --color-honey-200: #e9d29e;
  --color-honey-300: #d0b474;
  --color-honey-400: #bd994b;
  --color-honey-500: #a87f14;
  --color-honey-600: #8e6c16;
  --color-honey-700: #725612;
  --color-honey-800: #553e0a;
  --color-honey-900: #3b2b07;
  --color-honey-950: #251800;
}

SCSS

$honey: #ae8934;
$honey-rgb: 174, 137, 52;
$honey-light: mix(#fff, $honey, 20%);
$honey-dark: mix(#000, $honey, 20%);

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