Drops of Honey

CSS

:root {
  --drops-of-honey: #d4ae76;
  --drops-of-honey-rgb: 212 174 118;
  --drops-of-honey-oklch: oklch(0.772 0.085 76.6);
}

.element {
  color: var(--drops-of-honey);
  background-color: hsl(36 52% 65%);
  border-color: oklch(0.772 0.085 76.6);
}

Tailwind CSS v4

@theme {
  --color-drops-of-honey: #d4ae76;
  --color-drops-of-honey-50: #fff3da;
  --color-drops-of-honey-100: #f8e5c9;
  --color-drops-of-honey-200: #e8d1ac;
  --color-drops-of-honey-300: #cfb386;
  --color-drops-of-honey-400: #bb9864;
  --color-drops-of-honey-500: #a67e40;
  --color-drops-of-honey-600: #8c6b37;
  --color-drops-of-honey-700: #71562c;
  --color-drops-of-honey-800: #543e1e;
  --color-drops-of-honey-900: #3a2b14;
  --color-drops-of-honey-950: #241806;
}

SCSS

$drops-of-honey: #d4ae76;
$drops-of-honey-rgb: 212, 174, 118;
$drops-of-honey-light: mix(#fff, $drops-of-honey, 20%);
$drops-of-honey-dark: mix(#000, $drops-of-honey, 20%);

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