Wax

CSS

:root {
  --wax: #ddbb33;
  --wax-rgb: 221 187 51;
  --wax-oklch: oklch(0.799 0.149 94.1);
}

.element {
  color: var(--wax);
  background-color: hsl(48 71% 53%);
  border-color: oklch(0.799 0.149 94.1);
}

Tailwind CSS v4

@theme {
  --color-wax: #ddbb33;
  --color-wax-50: #fff6c5;
  --color-wax-100: #f6e9af;
  --color-wax-200: #e7d589;
  --color-wax-300: #ceb757;
  --color-wax-400: #bb9c09;
  --color-wax-500: #a78200;
  --color-wax-600: #8d6e00;
  --color-wax-700: #715800;
  --color-wax-800: #553f00;
  --color-wax-900: #3b2c00;
  --color-wax-950: #251900;
}

SCSS

$wax: #ddbb33;
$wax-rgb: 221, 187, 51;
$wax-light: mix(#fff, $wax, 20%);
$wax-dark: mix(#000, $wax, 20%);

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