Honey Bronze

CSS

:root {
  --honey-bronze: #daa47a;
  --honey-bronze-rgb: 218 164 122;
  --honey-bronze-oklch: oklch(0.759 0.085 58.9);
}

.element {
  color: var(--honey-bronze);
  background-color: hsl(26 56% 67%);
  border-color: oklch(0.759 0.085 58.9);
}

Tailwind CSS v4

@theme {
  --color-honey-bronze: #daa47a;
  --color-honey-bronze-50: #fff0dd;
  --color-honey-bronze-100: #fee2cc;
  --color-honey-bronze-200: #f0cdb0;
  --color-honey-bronze-300: #d8ae8b;
  --color-honey-bronze-400: #c5926b;
  --color-honey-bronze-500: #b0784a;
  --color-honey-bronze-600: #95663f;
  --color-honey-bronze-700: #775132;
  --color-honey-bronze-800: #593b24;
  --color-honey-bronze-900: #3e2818;
  --color-honey-bronze-950: #271609;
}

SCSS

$honey-bronze: #daa47a;
$honey-bronze-rgb: 218, 164, 122;
$honey-bronze-light: mix(#fff, $honey-bronze, 20%);
$honey-bronze-dark: mix(#000, $honey-bronze, 20%);

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