Honey Wax

CSS

:root {
  --honey-wax: #ffaa22;
  --honey-wax-rgb: 255 170 34;
  --honey-wax-oklch: oklch(0.802 0.165 71.6);
}

.element {
  color: var(--honey-wax);
  background-color: hsl(37 100% 57%);
  border-color: oklch(0.802 0.165 71.6);
}

Tailwind CSS v4

@theme {
  --color-honey-wax: #ffaa22;
  --color-honey-wax-50: #ffefc1;
  --color-honey-wax-100: #ffe0ab;
  --color-honey-wax-200: #ffca83;
  --color-honey-wax-300: #eaa94d;
  --color-honey-wax-400: #d98b00;
  --color-honey-wax-500: #c76d00;
  --color-honey-wax-600: #a85d00;
  --color-honey-wax-700: #874a00;
  --color-honey-wax-800: #653500;
  --color-honey-wax-900: #472400;
  --color-honey-wax-950: #2e1200;
}

SCSS

$honey-wax: #ffaa22;
$honey-wax-rgb: 255, 170, 34;
$honey-wax-light: mix(#fff, $honey-wax, 20%);
$honey-wax-dark: mix(#000, $honey-wax, 20%);

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