Honey Ginger

CSS

:root {
  --honey-ginger: #ba6219;
  --honey-ginger-rgb: 186 98 25;
  --honey-ginger-oklch: oklch(0.589 0.138 53.8);
}

.element {
  color: var(--honey-ginger);
  background-color: hsl(27 76% 41%);
  border-color: oklch(0.589 0.138 53.8);
}

Tailwind CSS v4

@theme {
  --color-honey-ginger: #ba6219;
  --color-honey-ginger-50: #ffecd0;
  --color-honey-ginger-100: #ffddbc;
  --color-honey-ginger-200: #ffc59b;
  --color-honey-ginger-300: #eea470;
  --color-honey-ginger-400: #dd8649;
  --color-honey-ginger-500: #ca680e;
  --color-honey-ginger-600: #ab5812;
  --color-honey-ginger-700: #89460f;
  --color-honey-ginger-800: #66320b;
  --color-honey-ginger-900: #482207;
  --color-honey-ginger-950: #2f1100;
}

SCSS

$honey-ginger: #ba6219;
$honey-ginger-rgb: 186, 98, 25;
$honey-ginger-light: mix(#fff, $honey-ginger, 20%);
$honey-ginger-dark: mix(#000, $honey-ginger, 20%);

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